QQ Mailbox Page Overall scaling effect, the original implementation method is so simple, here is an implementation example, you can refer to the following
Today I learned a little QQ mailbox page Overall scaling effect, the original implementation method is very simple, code as follows: code 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; $ (document.body). CSS ("-webkit-transform "," scale ("+ R +")); }); $ (window). Resize (function () { var r = Document.body.offsetwidth/window.scre en.availwidth; $ (document.body). CSS ("-webkit-transform", "scale (" + R +) "); }); </script> </head> <body> <div> Change window size try, what will you find? </div> </body> </html>