Summary of WEBAPP development skills (notes for mobile website development)

1. To develop web responsively, the page must adapt to the screen size. You can use fluid layout, as in the previous article (adaptive width layout). Other specific minor problems can be solved by using media query (let IE support CSS3 Media Query to achieve responsive web design and CSS3 Media Queries).
2. Because most mobile phones have advanced browsers, you can use HTML5+CSS3 development;
3. Use meta tags reasonably and flexibly, as follows;

4. Pay attention to the size of the link, because most of them are touch-screen phones, so users should be able to click on the label easily (I have seen an article before, but I can't find the source now. It seems that the minimum size is 42px*42px):

The size of the operation object is in line with the finger operation, and the size of the key is set in accordance with the specification:
The index finger click spacing is about 7*7 mm, 1mm spacing,
Thumb click 8*8 mm, 2mm spacing. The currently recommended value is 9mm, and the minimum should be no less than 7mm.
Of course, some important operations or frequently clicked areas can be set slightly larger.

5. Graceful degradation (smooth degradation) should be achieved, and JS and images should be used less. The page should also reflect its value when users prohibit downloading JS and images (because many apps are set by default not to automatically download images and other resources under 3G).
6. For image processing, just set the width to make the image adaptive and prevent it from deforming. Of course, when the resolutions of compatible devices vary greatly, you need to use media queries to load different images according to different resolutions (the same image needs to be set to several different specifications). This is to prevent small-resolution devices from loading large images and wasting traffic, and to prevent large-resolution devices from loading small images and causing image blur.
7. When the resolution is set too small and the normal modules appear too crowded, you can use media queries to display or hide modules appropriately according to the resolution, such as displaying a 2-column layout at 768px and a 1-column layout at 320px.

8. Of course, you can also jump to different URLs based on different terminals, see: JavaScript for mobile terminals such as mobile phones and tablets to adapt to jump URLs
9. There are many mobile browsers, and the default processing methods of mobile systems are also different. The compatibility issue is no simpler than that of the PC version, so it is necessary to summarize the commonly used processing methods, such as -webkit-tap-highlight-color:rgba(0,0,0,0); /*Disable link highlighting*/ -webkit-touch-callout:none; /*Disable link long press to pop up the option menu*/, etc.
10. Traffic is very important for mobile phones and tablets, so the names of classes and IDs in webapp should be as discrete as possible, such as hd for the head, bd for the middle, ft for the bottom, etc. (This suggestion is pending because it takes into account whether it is convenient for later maintenance and other issues);