自適應

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

做自適應的網頁時，需要在代碼中加入“祖傳代碼”，即通用代碼。

這是在頭部head引入的：

分別代表的意思是：

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

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

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

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

!(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代碼

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。