Today I learned about the overall scaling effect of my QQ mail webpage. The original implementation method is very simple. The Code is as follows:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, user-scalable = no">
<Title> test page </title>
<Style type = "text/css">
Div {
Width: 600px;
Text-align: center;
Font-size: 4em;
Color: #333;
}
</Style>
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.0.js"> </script>
<Script type = "text/javascript">
$ (Function (){
Var r = document. body. offsetWidth/window. screen. availWidth;
Certificate (document.body).css ("-webkit-transform", "scale (" + r + ")");
});
$ (Window). resize (function (){
Var r = document. body. offsetWidth/window. screen. availWidth;
Certificate (document.body).css ("-webkit-transform", "scale (" + r + ")");
});
</Script>
</Head>
<Body>
<Div> try to change the window size. what do you find? </Div>
</Body>
</Html>