Web Mobile Development Experience Summary

Organize web mobile development experience, part of the content for reference in the online blog.

1. Meta tags

<meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;"/> <!--width visual width, Initial-scale initializes the scale, Maximum-scale allows the user to scale the maximum scale, Minimum-scale allows the user to scale the minimum scale, user-scalable whether the user is allowed to scale. --><meta name= "apple-mobile-web-app-capable" content= "yes"/><!--set whether the Web app runs in full-screen mode. Delete the default Apple toolbar and menu bar. If the content is set to yes,web the app will run in full-screen mode, or vice versa. The default value for content is no, which indicates normal display. --><meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/><!--control the status bar display style. is set to Blank-translucent, the status bar appears as black translucent. --><meta name= "format-detection" content= "Telephone=no"/><!--prevent iOS from turning numbers into dial-up links-

2. Mask the shadow that appears when you click on an element in iOS

-webkit-tap-highlight-color:rgba (255,255,255,0);

3. The iOS Settings Input button style will be overridden by the default style

Input,textarea {      border:0;       -webkit-appearance:none; }

4, the length unit with REM

1rem = 16px;
HTML {    <!--root element--    font-size:62.5%;} p {    Font-size:1rem;      <!--font size equals = 10px   16px*62.5% = 10px-->}

5, multi-use Text-shadow this attribute, can beautify the text effect

Border-radius, Box-shadow, gradient, border-image, can be very well supported on the mobile side, using these properties can be used to achieve a very bright button.

6. Prevent users from saving pictures and copying pictures in iOS

IMG tag designation-webkit-touch-callout:none; You can disable the device pop-up list button so that users cannot save/copy your pictures.

7, prohibit users to copy, select

Use-webkit-user-select:none; User-select:none;

8,HTML5 call the Android or iOS dialing function

HTML5 provides a label for automatic call dialing, as long as you add Tel: in the href of the a tag.

As follows:

<ahref= "tel:4008106999,1034" >400-810-6999 turn 1034</a>

Call the phone directly as follows

<a href= "tel:15677776767" > click to call 15677776767</a>

9, long time to press and hold the page flash back

element {
-webkit-touch-callout:none;
}

10. Set the cache

<meta http-equiv= "Cache-control" content= "No-cache"/>

Mobile pages are usually cached after the first load, and then each refresh uses the cache instead of going back to the server to send the request. If you do not want to use the cache, you can set No-cache.

11, iOS keyboard letter input, default first letter capitalization

Solutions, set the following properties

<input type= "text" autocapitalize= "Off"/>

12, about the IOS system, the Chinese input method input in English, there may be a one-sixth space between the letters

Can be removed by regular means

This.value = This.value.replace (/\u2006/g, ");

To be Continued ~ ~

Web Mobile Development Experience Summary