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