Mobile-side web resource consolidation

Meta Basics

2. 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 "/>

4. Ignore numbers in a page as phone numbers

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

6. Ignore the recognition of email addresses in the Android platform

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

8. 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--

10. 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--

12. Viewport Template--general

    <! DOCTYPE html> 

14. Viewport template –target-densitydpi=device-dpi,android 2.3.5 The following versions are not supported

    <! DOCTYPE html>

Problems

1. 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;}

2. Winphone system A, input tag generated when clicked on a translucent gray background how to remove

   <meta name= "Msapplication-tap-highlight" content= "no" >

4. WebKit how the default appearance of form elements is reset

   . Css{-webkit-appearance:none;}

6. WebKit placeholder color value of form input box can change?

   Input::-webkit-input-placeholder{color: #AAAAAA;} Input:focus::-webkit-input-placeholder{color: #EEEEEE;}

8. Disable radio and checkbox default styles

   Input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display:none;}

10. 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;}

12. Prevent iOS and Android users from selecting text

    . Css{-webkit-user-select:none}

14. Make a phone call and send a message

    <a href= "tel:0755-10086" > Call:0755-10086</a>

    <ahref="sms:10086"> Texting : 10086</a>     

16. Write Message implementation

    <a href= "Mailto:[email protected]" >[email protected]</a>

18. 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{}}

20. Audio elements and video elements do not play automatically in iOS and Andriod

    $ (' HTML '). One (' Touchstart ', function () {Audio.play ()})

22. iOS uses-webkit-text-size-adjust to disable font resizing

    Body{-webkit-text-size-adjust:100%!important;}

24. Cancel input under iOS, enter the default capitalization of the English initials

    <input autocapitalize= "Off" autocorrect= "off"/>

26. Remove the Voice input button on Android

    Input::-webkit-input-speech-button {Display:none}

28. 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