Mobile-side web development

Meta Basics points:

The page automatically adjusts to the device width and disables user scaling.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />

Meta tags for ios:

⑴ allow full screen browsing for tabs on pages:

<meta name="apple-mobile-web-app-capable" content="Yes " />

⑵safari Top status bar style definition/Hide:

<meta name="apple-mobile-web-app-status-bar-style" content="Blank  " />  <!--hide status bar--><meta name="Apple-mobile-web-app-status-bar-style  " content="black" />  <!--definition status bar style is dark black--

⑶ios will turn a number-like number into a clickable and added connection to the phone, so we can disable it:

<meta name="format-detection" content="telephone=no" / >

(4) Ignore the recognition of email address in Android platform

<meta name="format-detection" content="email=no "

How the mobile side defines the font font-family

" Helvetica Neue ", Helvetica, Sans-serif;}

Call the code below on Android or iOS:

<a href="tel:13512656621"> Call:13512656621</a>

Texting

<a href="sms:10086"10086</a>

Call the phone system's own mail function

<p><a href="mailto:[email protected" > Send email </a></p>

WebKit the color value of the placeholder of the form input box is changed:

input::-webkit-input-placeholder{color:red;} //  Input:focus::-webkit-input-placeholder{color:blue;} // user clicks into Blue

Clear the inner shadow of the input box under iOS

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

Mobile-side web development