自適應(yīng)

使網(wǎng)頁能適應(yīng)不同終端設(shè)備的技術(shù)。原理是通過檢測視口分辨率來判斷是什么終端的，PC，手機還是平板。

做自適應(yīng)的網(wǎng)頁時，需要在代碼中加入“祖?zhèn)鞔a”，即通用代碼。

這是在頭部head引入的：

分別代表的意思是：

initial-scale=1.0 ：初始縮放比例為1.0(原始大小)，這句代碼的目的還不是放置用戶 縮放的

minimum-scale=1.0 ：網(wǎng)頁最小的縮小比例為1.0(原始大小)，設(shè)置這句代碼的目的是為 了放置某些程序(比如JS)無意中修改了網(wǎng)頁的縮小比例

maximum-scale=1.0 ：網(wǎng)頁最大的放大比例為1.0(原始大小)，設(shè)置這句代碼的目的是為 了放置某些程序(比如JS)無意中修改了網(wǎng)頁的放大比例

user-scalable=0 ：這句代碼才是不允許用戶對網(wǎng)頁進行縮放

!(function (win, doc) {

function setFontSize() {var winWidth =window.innerWidth;

doc.documentElement.style.fontSize= (winWidth / 1262) * 100+ 'px';

}var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';var timer = null;

win.addEventListener(evt, function () {

clearTimeout(timer);

timer= setTimeout(setFontSize, 300);

},false);

win.addEventListener("pageshow", function (e) {if(e.persisted) {

clearTimeout(timer);

timer= setTimeout(setFontSize, 300);

}

},false);

setFontSize();

}(window, document));

這是必要的script代碼

其中紅色字體為設(shè)計稿的寬度和比例，定義不同的大小時，需要更改。

總結(jié)

以上是生活随笔為你收集整理的html教程自适应,Html-自适应的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。