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

2022-03-25 00:57:57 字數 779 閱讀 6431

優點:寬度之間無縫銜接, 操作起來也相對比較方便。

缺點:字型大小需要另外一套自適應方法來調整;當螢幕寬度大於700px後,繼續按照百分比元素會偏大,這個時候調整起來會比較麻煩。

優點:可以根據不同螢幕寬度來設定,可以完美解決上面說的螢幕偏大時的比例問題。字型的大小也不存在問題。

缺點:根據寬度區間來設定,無法實現無縫變換。

在參考**網的自適應方法時,偶然發現頁面的fontsize會根據螢幕的寬度自動調整,而且螢幕寬度和所設字型大小的商是一定的。

於是猜想它是用js獲取螢幕寬度後,按照固定比例縮小後作為rem的單位長度實現自適應。

這不就是優點全有滴解決方法嗎!?請容許我激動一下下(☆_☆)

js**寫起來非常簡單,而且完美解決了用rem來設定無法達到無縫銜接的問題。

但移動端測試後問題就出現了,移動端safari在html載入完畢之前將js以迅雷不及掩耳盜鈴之勢執行了,在頁面沒有按照viewport設定好寬度前,js就讀取了錯誤的寬度,導致元素變成原來的兩倍大0^0, 需要用settimeout()解決問題。

最終**:

zepto(function($);

//防止在html未載入完畢時執行,保證獲取正確的頁寬

settimeout(function(), 200);

});

網頁大小自適應方案

優點 寬度之間無縫銜接,操作起來也相對比較方便。缺點 字型大小需要另外一套自適應方法來調整 當螢幕寬度大於700px後,繼續按照百分比元素會偏大,這個時候調整起來會比較麻煩。優點 可以根據不同螢幕寬度來設定,可以完美解決上面說的螢幕偏大時的比例問題。字型的大小也不存在問題。缺點 根據寬度區間來設定,...

移動端自適應rem大小

自執行函式封裝 以iphone5的根字型大小為20px螢幕邏輯畫素為320,可以改變 字串名字 in window 判斷window下有沒有這個字串方法屬性,返回布林值 orientationchange 螢幕方向改變時候觸發的函式 resize螢幕尺寸發生改變時候觸發的函式 function do...

pc端網頁自適應各版本移動端螢幕大小

在網上廣泛搜尋後終於找到了解決辦法 meta標籤起決定性作用 meta name viewport content width device width,initial scale 1,minimum scale 1,maximum scale 1,user scalable no 在網頁的中增加這...