Today I learned a little QQ mailbox page Overall scaling effect, the original implementation method is very simple, the code is as follows:
Copy Code code as follows:
<! DOCTYPE html>
<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;
$ (document.body). CSS ("-webkit-transform", "scale (" + R +) ");
});
$ (window). Resize (function () {
var r = document.body.offsetwidth/window.screen.availwidth;
$ (document.body). CSS ("-webkit-transform", "scale (" + R +) ");
});
</script>
<body>
<div> Change window size try, what will you find? </div>
</body>
