使用CSS3的scale實(shí)現(xiàn)網(wǎng)頁整體縮放
更新時間：2014年03月18日 17:44:09 作者：
QQ郵箱的網(wǎng)頁整體縮放效果，原來實(shí)現(xiàn)方法如此簡單，下面有個實(shí)現(xiàn)示例，大家可以參考下
今天學(xué)習(xí)了一下QQ郵箱的網(wǎng)頁整體縮放效果，原來實(shí)現(xiàn)方法很簡單，代碼如下：
<!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>測試頁面</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>
</head>
<body>
<div>改變窗口大小試試，你會發(fā)現(xiàn)什么？</div>
</body>
</html>
復(fù)制代碼 代碼如下:
<!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>測試頁面</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>
</head>
<body>
<div>改變窗口大小試試，你會發(fā)現(xiàn)什么？</div>
</body>
</html>
相關(guān)文章
微信小程序?qū)崿F(xiàn)導(dǎo)航欄和內(nèi)容上下聯(lián)動功能代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)導(dǎo)航欄和內(nèi)容上下聯(lián)動功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了原生js實(shí)現(xiàn)類似彈窗抖動效果的相關(guān)資料,推薦給大家，需要的朋友可以參考下2015-04-04
Taro UI框架開發(fā)小程序?qū)崿F(xiàn)左滑喜歡右滑不喜歡效果的示例代碼
這篇文章主要介紹了Taro UI開發(fā)小程序?qū)崿F(xiàn)左滑喜歡右滑不喜歡效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
淺談JS中String()與 .toString()的區(qū)別
下面小編就為大家?guī)硪黄獪\談JS中String()與 .toString()的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
在這篇文章中小編給大家整理了關(guān)于JS中DOM事件綁定的相關(guān)知識點(diǎn)，有興趣的朋友趕快學(xué)習(xí)參考下。2018-03-03
js抽獎轉(zhuǎn)盤實(shí)現(xiàn)方法分析
這篇文章主要介紹了js抽獎轉(zhuǎn)盤實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了js抽獎轉(zhuǎn)盤原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
JS實(shí)現(xiàn)帶圓弧背景漸變效果的導(dǎo)航菜單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)帶圓弧背景漸變效果的導(dǎo)航菜單代碼,涉及JavaScript基于鼠標(biāo)事件操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
今天小編就為大家分享一篇解決layui的input獨(dú)占一行的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js動態(tài)添加表格數(shù)據(jù)使用insertRow和insertCell實(shí)現(xiàn)
這篇文章主要介紹了js動態(tài)添加表格數(shù)據(jù)并使用insertRow和insertCell實(shí)現(xiàn),需要的朋友可以參考下2014-05-05
基于原生js運(yùn)動方式關(guān)鍵點(diǎn)的總結(jié)(推薦)
下面小編就為大家?guī)硪黄谠鷍s運(yùn)動方式關(guān)鍵點(diǎn)的總結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10