Html-自適應

自適應

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

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

這是在頭部head引入的：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

分別代表的意思是：

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

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

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

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

<script>
        !(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>

這是必要的script代碼

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