<meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name= "viewport"/>
<meta content= "Telephone=no" name= "Format-detection"/>
<meta name= "format-detection" content= "Email=no"/>
<meta http-equiv= "Cache-control" content= "No-cache"/>
html{font-size:20px;width:100%;height:100%;}
body{margin:0;padding:0;}
<script>
Orientationchange Direction Change Event
(Function (doc, win) {
var docel = doc.documentelement,//root element html
The Judge window has no Orientationchange this method, has to assign the value to a variable, does not return the Resize method.
resizeevt = ' orientationchange ' in window? ' Orientationchange ': ' Resize ',
Recalc = function () {
var clientwidth = docel.clientwidth;
if (!clientwidth) return;
The fontsize size of document is set to the size of a certain proportion of the window, thus achieving a responsive effect.
DocEl.style.fontSize = (clientwidth/320) + ' px ';
};
Alert (Docel)
if (!doc.addeventlistener) return;
Win.addeventlistener (Resizeevt, Recalc, false); The//addeventlistener event method accepts three parameters: the first is the event name, such as Click event OnClick, the second is the function to execute, The third is a Boolean value
Doc.addeventlistener (' domcontentloaded ', Recalc, FALSE)//Bind browser zoom and load time
}) (document, window);
Alert (document.documentelement.clientwidth/320)
</script>
Mobile-screen Adaptive JS and REM