WebApp Development Tips (mobile Website development considerations)

The following is just my personal summary, if you have better suggestions, please leave a message, together to encourage progress!! - -！

1, to respond to the development of the web, that is, the page must be adaptive 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 for Responsive web design and CSS3 Media Queries);
2, because most of the mobile phone is a high-level browser, you can use html5+CSS3 Development;
3, reasonable and flexible use of META tags, 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 indicates that the width of the document is forced to remain 1:1 with the width of the device, and the maximum width of the document is 1.0, and the user is not allowed to click on the screen to zoom in;
The second meta tag is the safari private meta tag in the iphone device. It says: Allow full-screen mode to browse, hide the browser navigation bar,
The third meta tag is also the iphone's private label, which specifies the style of the iphone's status bar on the top of safari;
The fourth meta tag says: Tell the device to ignore the numbers on the page as a phone number, which can be turned on if the individual needs to be identified: <a href= "TEL:13030303030″>13030303030</A>
See example: Common META tag example
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 (I have seen the article, now can not find the source, as if it is the smallest 42px*42px):
The size of the operand of the operation of the finger, Key size Settings specification:
index finger Click on the spacing of 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 actions, or areas that are frequently clicked, 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 processing of the picture, as long as the width, so that the picture to adapt, to prevent deformation of the picture, of course, to be compatible with the device resolution gap is very large, you need to use media queries according to different resolutions to 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 display of normal module is 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, etc.

/* Large Desktop */@media (min-width:1200px) {...} /* Portrait tablet to landscape and desktop */@media (min-width:768px) and (max-width:979px) {...} /* Landscape Phone to portrait tablet */@media (MAX-WIDTH:767PX) {...} /* Landscape phones and Down */@media (max-width:480px) {...}

8, of course, can also be judged by different terminals to jump to different URLs, see: Mobile phone tablet and other mobile terminals to match the URL of the JavaScript
9, mobile browser many and 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;
10, mobile mobile phone tablet , the flow is very important, so WebApp in the name of class and ID as far as possible breakpoints, such as the head can be named HD, the middle of BD, the bottom for FT, etc. (this proposal is to be determined, because the maintenance is convenient and so on);

Specific experience Recommendations:
1.-webkit-tap-highlight-color:rgba (255,255,255,0) can simultaneously block the shadow that appears when clicking on an element under iOS and Android.
Note: The transparent property value is not valid under Android.
2,-webkit-appearance:none can simultaneously shield the input box strange inside shadow, solves the iOS cannot modify the button style, the test also found a small problem is that, after adding the above attributes, iOS default or with rounded corners, but you can use Border-radius Property modification.
3,-webkit-transform:translate3d (0, 0, 0) can make the animation more fluent under iOS (this property calls the hardware acceleration mode, without using the JS engine, direct browser kernel rendering), but not in the Android under the chaos, Many unseen bugs are due to this.
4, @-webkit-keyframes can be predefined many of the animation you think of, and then through the-webkit-transition to invoke.
5,-webkit-background-size can do high-definition icons, but some of the lower version of Android can only recognize Background-size, so it is necessary to write two, the use of this property is recommended to use the value of cover, you can automatically go to match width and height.
6, Border-radius, Box-shadow, gradient, border-image, do not explain, you can streamline the code.
7, Android, iOS4 and below, fixed-width/blocks-level elements of the Overflow:scroll/auto failure, belonging to the browser bug, can be achieved by third-party tools.
8, ios5+ can be Scrollto (0,0) to automatically hide the browser address bar.
9. CSS3 animation will affect your autofocus, so auto-focus should be done before the animation is executed, or discarded directly.
10, if involves more outside the domain link, the DNS prefetching can help you do the DNS pre-parsing.
11, if you want your site to spread more in SNS, then open Graph protocol will be more suitable for you.
12, when using Iscroll time, can not use: focus{outline:0} pseudo-class, otherwise sliding card.
13, iOS prohibit the screen when the font becomes larger,-webkit-text-size-adjust:none;
14, the retina display of the iphonethe values in the CSS are doubled, including the image size doubled, and the retina display is sophisticated enough to be easily understood as 1 pixels on the Retina display equivalent to a normal 2 pixels.
15, solve the splash screen,-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;
16, touch the event with Touch series, do not use the click to replace;
17, about the power, JPEG the most power-saving (jpeg>png>gif), the number of pictures, about about electricity consumption, Ajax dynamic content consumption, reflow and repaint power consumption, WebGL and Translate3d consumption

WebApp Development Tips (mobile Website development considerations)