1. To respond to the development of the web, that is, the page must be self-adapting to the screen size, you can use the fluid layout, such as the previous article (Adaptive width layout), other specific small problems can be solved with media query (let IE support CSS3 media Query implements responsive web design and CSS3 Media Queries) 2. Since mobile phones are mostly advanced browsers, they can be developed using HTML5+CSS3; 3. The use of META tags is reasonable and flexible, as follows:
| <meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name= "viewport"/> <meta content= "yes" name= "apple-mobile-web-app-capable"/><meta content= "Black" name= " Apple-mobile-web-app-status-bar-style "/><meta content=" Telephone=no "name=" Format-detection "/> |
The first meta tag means: Force the width of the document to remain 1 of the width of the device : 1, and the maximum document width ratio is 1.0, and does not allow users to click on the screen to enlarge browsing; the second meta tag is the safari private meta tag in the iphone device, which says: Allow full-screen mode browsing; the third meta tag is the iphone's private label, which Safar The style of the status bar at the top of I; the fourth meta tag means: Tell the device to ignore the number on the page as phone number 4. Be sure to pay attention to the size of the link, because most of the touch screen phone, to make it easy for users to click on the label
| The size of the operand conforms to the operation of the finger, the size of the key is set Specification: index finger Click the spacing about 7*7 mm, 1mm pitch, thumb click 8*8 mm,2mm pitch. The current recommended value is 9mm in size and minimum should be no less than 7mm. Of course, some important operations, or areas of frequent clicks, can be set slightly larger. |
5. To do a graceful downgrade (smooth degradation), less use JS, pictures, to prohibit users to download JS and pictures when the page can also reflect the value (because many apps default to 3G is not automatically download pictures and other resources). 6. For the image processing, as long as the width, so that the picture adaptive, to prevent deformation of the picture, of course, compatible with the device resolution gap is very large, you need to use media queries depending on the resolution of the different load different pictures (need the same set for several different specifications), One is to prevent small-resolution device loading large picture wasted traffic, and the second is to prevent large-resolution device loading small images caused by blurred picture problems. 7. When the setting resolution is too small, the normal module appears too crowded, you can use media queries according to the resolution of the appropriate display or hide modules, such as 768PX display 2 column layout, 320px display 1 column layout. 8. It is also possible to jump to different URLs based on judging different terminals, see: JavaScript 9 for mobile devices such as mobile phones that are suitable for jump URLs. Mobile browser More and more chaotic, and the default processing method of mobile phone system is also different, the compatibility of the problem is no more simple than the PC version, so 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 the pop-up options menu */And so on 10. For mobile mobile phone tablet, traffic is very important, so WebApp class and ID name as far as possible breakpoints, such as the head can be named HD, the middle of the BD, the bottom of the FT, etc. (this proposal is to be determined, because of the convenience of later maintenance and so on);
WebApp Attention Issues
