使用CSS3的scale實(shí)現(xiàn)網(wǎng)頁整體縮放
更新時(shí)間：2014年03月18日 17:44:09 作者：
QQ郵箱的網(wǎng)頁整體縮放效果，原來實(shí)現(xiàn)方法如此簡(jiǎn)單，下面有個(gè)實(shí)現(xiàn)示例，大家可以參考下
今天學(xué)習(xí)了一下QQ郵箱的網(wǎng)頁整體縮放效果，原來實(shí)現(xiàn)方法很簡(jiǎ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>測(cè)試頁面</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>改變窗口大小試試，你會(huì)發(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>測(cè)試頁面</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>改變窗口大小試試，你會(huì)發(fā)現(xiàn)什么？</div>
</body>
</html>
相關(guān)文章
基于Javascript實(shí)現(xiàn)文件實(shí)時(shí)加載進(jìn)度的方法
不知道大家有沒有發(fā)現(xiàn)在現(xiàn)在的移動(dòng)頁面上，有很多情況需要加載大量的資源。但是移動(dòng)端的訪問速度和pc還是有很大的差距，有些時(shí)候需要一些取巧的方式來提升用戶體驗(yàn)，而實(shí)時(shí)顯示加載進(jìn)度就是其中一種。這篇文章就給大家分享了Javascript實(shí)現(xiàn)文件實(shí)時(shí)加載進(jìn)度的方法。2016-10-10
本篇文章介紹了js操作iframe的一些方法的實(shí)例代碼與步驟，有需要的朋友可以參考一下2013-06-06
requirejs按需加載angularjs文件實(shí)例
本篇文章主要介紹了requirejs按需加載angularjs文件實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
js實(shí)現(xiàn)點(diǎn)擊鏈接后延遲3秒再跳轉(zhuǎn)的方法
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊鏈接后延遲3秒再跳轉(zhuǎn)的方法,通過javascript的setTimeout方法實(shí)現(xiàn)延遲跳轉(zhuǎn)的功能,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了微信小程序—仿淘寶熱搜詞在搜索框中輪播功能的相關(guān)資料,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了JSONP原理及簡(jiǎn)單實(shí)現(xiàn)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
在JavaScript中使用Promise.allSettled()的方法
Promise.allSettled()是一個(gè)游戲規(guī)則改變者，讓您等待所有承諾得到解決（解決或拒絕），然后根據(jù)結(jié)果采取行動(dòng)，這篇文章主要介紹了如何在JavaScript中使用Promise.allSettled(),需要的朋友可以參考下2023-07-07
JS判斷是否在微信瀏覽器打開的簡(jiǎn)單實(shí)例(推薦)
下面小編就為大家?guī)硪黄狫S判斷是否在微信瀏覽器打開的簡(jiǎn)單實(shí)例(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
xtree.js 代碼...2007-03-03
JavaScript?算法實(shí)現(xiàn)復(fù)寫0雙指針解法
這篇文章主要為大家介紹了JavaScript?算法?復(fù)寫0雙指針解法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11