Tips on making web pages for mobile phones

The width of the mobile page is best controlled within 240px, because this allows a series of operations to be performed without moving the screen. Our company's project used a background image with a size of 240*420. This actually has a disadvantage. I have to control the height of each page within 420, otherwise it will look ugly if it exceeds the limit.

Neither ordinary mobile phones nor smart phones seem to support js. Functions like <a href="javascript:history.back()"> and "alert()" are not supported. In addition, mobile phones do not support the style of "<input type="button">" very well. The same code has a certain width difference between the browser and the mobile phone, given the width. So my suggestion is to avoid using buttons if possible. You can use text hyperlinks instead, or you can consider using small icons.

It is best to use table for list pages instead of ul li, or p+space. On the one hand, it is for typesetting, and on the other hand, if the elements in a column are too long, you can use "table tr td{word-break:break-all;}". The other two solutions can only truncate the string. Of course, from my point of view, truncate the string may be a good choice, because the height of my pages is fixed.

There is still a certain necessity for large pictures. For example, navigation maps can give people a dazzling feeling, but the pictures cannot be too large and must be controlled within 10K. Our company's navigation map uses a page similar to Lenovo mobile phones, as follows:

The details of mobile web pages may be far less than those of ordinary web pages. At least it only needs to be passed on the mobile page, without the need for IE6 7 8 or other browsers. However, it still requires some thought to make it look good.