Meta Basics
- H5 page window automatically adjusts to device width and prevents users from zooming the page
<meta name= "viewport" content= "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, User-scalable=no "/>
- Ignore numbers in a page as phone numbers
<meta name= "format-detection" content= "Telephone=no"/>
- Ignore the recognition of email addresses in the Android platform
<meta name= "format-detection" content= "Email=no"/>
- When the site is added to the home screen Quick Start mode, you can hide the address bar, only for iOS safari
<meta name= "apple-mobile-web-app-capable" content= "yes"/><!--ios7.0 version, Safari does not see the effect--
- Add a website to the home screen Quick Start mode, only for iOS Safari top status bar style
<meta name= "Apple-mobile-web-app-status-bar-style" content= "BLACK"/><!--optional Default, black, Black-translucent--
- Viewport Template--general
<! DOCTYPE html>
- Viewport template –target-densitydpi=device-dpi,android 2.3.5 The following versions are not supported
<! DOCTYPE html>
Problems
- How to remove the border when elements are clicked on some Android systems
Android users click on a link, there will be a border or translucent gray matte, different manufacturers defined the amount of the effect is not the same, you can set the alpha value of-webkit-tap-highlight-color 0 to remove some of the machine's own effect
A,button,input,textarea{-webkit-tap-highlight-color:rgba (0,0,0,0;)-webkit-user-modify: Read-write-plaintext-only;}
- Winphone system A, input tag generated when clicked on a translucent gray background how to remove
<meta name= "Msapplication-tap-highlight" content= "no" >
- WebKit how the default appearance of form elements is reset
. Css{-webkit-appearance:none;}
- WebKit placeholder color value of form input box can change?
Input::-webkit-input-placeholder{color: #AAAAAA;} Input:focus::-webkit-input-placeholder{color: #EEEEEE;}
- Disable radio and checkbox default styles
Input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display:none;}
- Disable PC-side form input box default purge button
Input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display:none;}
- Prevent iOS and Android users from selecting text
. Css{-webkit-user-select:none}
- Make a phone call and send a message
<a href= "tel:0755-10086" > Call:0755-10086</a>
<ahref="sms:10086"> Texting : 10086</a>
- Write Message implementation
<a href= "Mailto:[email protected]" >[email protected]</a>
- Events and styles for screen rotation
Event Window.orientation, value: Plus or minus 90 indicates that the horizontal screen mode, 0 and 180 are displayed in portrait mode; window.onorientationchange = function () {switch ( window.orientation) {case-90:case 90:alert ("Horizontal screen:" + window.orientation); case 0:case 180:alert ("vertical screen:" + Window.orientation); break;}} Style//Portrait style used when @media all and (orientation:portrait) {. css{}}//the style used in the horizontal screen @media all and (Orientation:landscape) {. css{}}
- Audio elements and video elements do not play automatically in iOS and Andriod
$ (' HTML '). One (' Touchstart ', function () {Audio.play ()})
- iOS uses-webkit-text-size-adjust to disable font resizing
Body{-webkit-text-size-adjust:100%!important;}
- Cancel input under iOS, enter the default capitalization of the English initials
<input autocapitalize= "Off" autocorrect= "off"/>
- Remove the Voice input button on Android
Input::-webkit-input-speech-button {Display:none}
- Play Video not fullscreen
<!--1.ios7+ support AutoPlay 2. Devices that support airplay (e.g. speaker, Apple TV) play x-webkit-airplay= "true" 3. Play video not full screen webkit-playsinline= "true"-- ><video x-webkit-airplay= "true" webkit-playsinline= "true" preload= "Auto" autoplay src= "/http" ></video >
Mobile-side web resource consolidation