MobileWeb 適配總結

2021-07-14 10:51:03 字數 2301 閱讀 5871

開門見山,本篇將總結一下 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來縮放。

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

**實現中使用到的mobile-util.js對定寬和 rem 適配進行了整合,原始碼在此。

MobileWeb 適配總結

開門見山,本篇將總結一下 mobileweb 的適配方法,即我們常說的h5頁面 手機頁面 wap頁 webview頁面等等。本篇討論的頁面指專門針對手機裝置設計 的頁面,並非相容全裝置的響應式布局。文中提到的 device width 指 viewport meta 標籤中 width 的值,即由瀏...

MobileWeb 適配總結

開門見山,本篇將總結一下 mobileweb 的適配方法,即我們常說的h5頁面 手機頁面 wap頁 webview頁面等等。本篇討論的頁面指專門針對手機裝置設計的頁面,並非相容全裝置的響應式布局。文中提到的device width指 viewport meta 標籤中 width 的值,即由瀏覽器指...

mobile web頁面除錯方法

此文已由作者張含會授權網易雲社群發布。browser sync 安裝步驟 npm install g browser sync 以當前目錄為根,啟動乙個靜態伺服器,檔案修改頁面自動重新整理 browser sync start server files css css,html 設定 browser...