移動端網頁大小自適應方案

時間 2019-11-16

標籤移動網頁大小自適應方案欄目無線简体版

原文原文鏈接

終於完成了手頭的項目，失蹤人口又迴歸啦！在作項目的過程當中，遇到不少值得思考的點，速速道來。第一個遇到的就是網頁大小自適應的問題。

目前比較經常使用的方法有：

首先要讓頁面大小鋪滿屏幕又不能溢出。只須要在html<head>標籤內加入viewport（以下），參數分別表示：頁面寬度＝屏幕寬度，最大和最小伸縮比都是1，不容許用戶拉縮。

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

百分比自適應：把長度單位轉換爲百分比來表示，這樣在不一樣的寬度下，元素的長寬也會隨之變化。

優勢：寬度之間無縫銜接，操做起來也相對比較方便。javascript

缺點：字體大小須要另一套自適應方法來調整；當屏幕寬度大於700px後，繼續按照百分比元素會偏大，這個時候調整起來會比較麻煩。html

rem、em自適應 ：用媒體查詢的方法，肯定在不一樣屏幕寬度下，改變<html>或<body>的fontsize。再用rem, em替代 px做爲單位實現自適應。

優勢：能夠根據不一樣屏幕寬度來設置，能夠完美解決上面說的屏幕偏大時的比例問題。字體的大小也不存在問題。java

缺點：根據寬度區間來設置，沒法實現無縫變換。測試

這些兼容方法各有優缺點，都不算完美，怎樣才能把優勢結合在一塊兒，同時避免缺點呢？

在參考淘寶網的自適應方法時，偶然發現頁面<html>的fontsize會根據屏幕的寬度自動調整，並且屏幕寬度和所設字體大小的商是必定的。
因而猜測它是用JS獲取屏幕寬度後，按照固定比例縮小後做爲rem的單位長度實現自適應。
這不就是優勢全有滴解決方法嗎！？請允許我激動一下下(☆_☆)字體

JS代碼寫起來很是簡單，並且完美解決了用rem來設置沒法達到無縫銜接的問題。
但移動端測試後問題就出現了，移動端safari在html加載完畢以前將JS以迅雷不及掩耳盜鈴之勢執行了，在頁面沒有按照viewport設置好寬度前，JS就讀取了錯誤的寬度，致使元素變成原來的兩倍大0^0, 須要用setTimeout()解決問題。scala

最終代碼：

Zepto(function($){
    var win = window,
        doc = document;

    function setFontSize() {
        var winWidth =  $(window).width();
        // 640寬度以上進行限制
        var size = (winWidth / 640) * 100;
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;
    };
    
    //防止在html未加載完畢時執行，保證獲取正確的頁寬
    setTimeout(function(){
        // 初始化
        setFontSize();
        
    }, 200);
 
});