今日、QQメールボックスのWebページの全体的なスケーリング効果について学びました。実装方法は非常に簡単であることがわかりました。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<Meta charset = "utf-8" />
<Meta name = "Viewport" content = "width = device-width、initial-scale = 1、maximing-scale = 1、user-scalable = no">
<title>テストページ</title>
<style type = "text/css">
div {
幅：600px;
テキストアライグ：センター;
font-size：4em;
色：＃333;
}
</style>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-111.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>
</head>
<body>
<div>ウィンドウサイズを変更してみてください、何を見つけますか？ </div>
</body>
</html>