HTML5 Mobile Web Development Combat

1. Solve the change of the font size of the screen

HTML {            -webkit-text-size-adjust: 100%;             -ms-text-size-adjust: 100%;             text-size-adjust:100%;        }

2. Mobile viewport device width, no scaling

<name= "Viewport"  content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0 ">

3.CSS3 Media Query

Div {background: Red; height: 100px;} @media screen and         (min-width:480px){    //greater than 480px green            div{background: Green ;}         }

4. You can continue to use PX without EM

5. Solve the ancient mobile device browser does not recognize viewport

<Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0">    <Metaname= "handheldfriendly"content= "true"/>     <!--The old mobile device does not recognize the viewport attribute Plamos -    <Metaname= "Mobileoptimized"content= " the">       <!--Microsoft's PocketPC -

6. Solve the Safari font size change

<Script>          varMetas=document.getElementsByTagName ('Meta'); vari; if(Navigator.userAgent.match (/IPhone/i)) { for(i=0; I<metas.length; I++) {                    if(Metas[i].name== "Viewport") {metas[i].content= "width=device-width, minimum-scale=1.0, maximum-scale=1.0"; }} document.addeventlistener ("Gesturestart", Gesturestart,false); }            functionGesturestart () { for(i=0; I<metas.length; I++) {                    if(Metas[i].name== "Viewport") {metas[i].content= "width=device-width, minimum-scale=0.25, maximum-scale=1.6"; }                }            }        </Script>

HTML5 Mobile Web Development Combat