Hari ini saya belajar tentang efek penskalaan keseluruhan dari halaman web QQ Mailbox.
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width = perangkat-lebar, skala awal = 1, skala maksimum = 1, skala pengguna = tidak">
<iteme> halaman tes </iteme>
<type style = "text/css">
Div {
Lebar: 600px;
Teks-Align: tengah;
font-size: 4em;
Warna: #333;
}
</tyle>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.0.js"> </ptript>
<type skrip = "Teks/JavaScript">
$ (function () {
var r = document.body.offsetwidth / window.screen.availwidth;
$ (document.body) .css ("-webkit-transform", "skala (" + r + ")");
});
$ (window) .resize (function () {
var r = document.body.offsetwidth / window.screen.availwidth;
$ (document.body) .css ("-webkit-transform", "skala (" + r + ")");
});
</script>
</head>
<body>
<div> Coba ubah ukuran jendela, apa yang akan Anda temukan? </div>
</body>
</html>