MobileWeb 適配總結

開門見山，本篇將總結一下 mobileweb 的適配方法，即我們常說的h5頁面、手機頁面、wap頁、webview頁面等等。

本篇討論的頁面指專門針對手機裝置設計

的頁面，並非相容全裝置的響應式布局。文中提到的 device-width

指 viewport meta 標籤中 width 的值，即由瀏覽器指定的值，常用機型對應值可參照 screen sizes。

在不同尺寸的手機裝置上，頁面「相對性的達到合理的展示（自適應）」或者「保持統一效果的等比縮放（看起來差不多）」。

一般來說，我們需要關注的是：字型、高寬間距、影象（圖示、）。

其中，影象相對要複雜一些，針對流量、清晰度等問題網上也有比較成熟的解決方案，比如：向量化、字型化、image-set 等等，在此不做深入。在滿足快速開發的需求下，我們使用較為偷懶的方式：利用 css 將影象限定在元素內（ img 使用[max-]width: 100%，背景影象使用 background-size ），布局只針對元素進行。

另外要考慮到，設計師設計視覺稿時使用什麼樣的寬度，才能既滿足設計自身的需求又能讓前端開發方便的切圖適配。

圍繞這三要素，我們用乙個小例子來說明接下來要介紹的三種方案的實現方式，按 640px 標準需實現的效果如圖：

這是目前最通用的一種做法，屬於自適應布局，viewport width 設定為 device-width，以較小寬度（如 320px）的視覺稿作為參照進行布局。垂直方向的高度和間距使用定值，水平方向混合使用定值和百分比或者利用彈性布局，最終達到「當手機螢幕變化時，橫向拉伸或者填充空白的效果」。影象元素根據容器情況，使用定值或者background-size 縮放。

視覺稿、頁面寬度、viewport width 使用統一寬度，利用瀏覽器自身縮放完成適配。頁面樣式（包括影象元素）完全按照視覺稿的尺寸，使用定值單位（px、em）即可完成。

縮放失效問題需通過 js 動態設定 initial-scale。

var
fixscreen 
=function()}
}

文字折行問題可以通過 css 樣式解決。

section,p ,div,h1 ,h2,h3 ,h4,h5 ,h6,. fix- break

既然該方案使用固定寬度值，那麼這個值是多少合適呢？首要考慮的是主流解析度，可參考 screen sizes 和友盟指數的資料；其次要考慮設計部門常用的設計尺寸，綜合協調，最終確定乙個合適的值。

依照某特定寬度設定 rem 值（即 html 的 font-size），頁面任何需要彈性適配的元素，尺寸均換算為 rem 進行布局；當頁面渲染時，根據頁面有效寬度進行計算，調整 rem 的大小，動態縮放以達到適配的效果。利用該方案，還可以根據 devicepixelratio 設定 initial-scale 來放大 viewport，使頁面按照物理畫素渲染，提公升清晰度。

開發時，css 及 js 都以 16px 作為基數換算 rem，借助預編譯庫（以 scss 為例），我們設定乙個動態尺寸單位$ppr: 750px/16px/1rem，即 pixel per rem，任何使用彈性尺寸的地方寫作：width: 100px/$ppr。

動態調整 rem 的方法如下：

var
fixscreen 
=function
()var
rem 
=width /16
;docel
.style
.fontsize 
=rem 
+'px';};
//...
refreshrem
();}
}

注意，較小的背景圖（比如一些 icon）的 background-size 不要使用具體 rem 數值，裁剪後會出現邊緣丟失。應使用與元素等尺寸切圖，設定background-size: contain|cover來縮放。

總的來看，目前還沒有完美的解決方案，這些也只是盡可能的滿足快速開發、簡單適配需求的通用方案。其中對於一些較為細節的問題（比如字型的點陣尺寸、非彈性的定值需求）未做討論。實際開發過程中，更應該綜合考慮專案型別、資源成本、人員配合等多方面的因素，選擇合適的方案。

MobileWeb 適配總結

MobileWeb 適配總結

MobileWeb 適配總結

mobile web頁面除錯方法

相關推薦