移動端適配問題

①

移動端web頁面，即常說的h5頁面、手機頁面、webview頁面等。

②適配問題產生的原因：手機裝置螢幕尺寸不一，做移動端的web頁面，需要考慮在安卓/ios的各種尺寸裝置上的相容，針對移動端裝置的頁面，設計與前端實現怎樣做能更好地適配不同螢幕寬度的移動裝置。

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

④參考文章：

移動端解決適配問題

①viewport視口：是移動端特有的，是乙個虛擬的區域，承載網頁的。承載關係是瀏覽器、viewport、網頁。參考mdn文件

②流式布局：就是百分比布局，非固定畫素，內容向兩側填充

②物理畫素(physical pixel)：又被稱為裝置畫素，是顯示裝置中乙個最微小的物理部件。每個畫素可以根據作業系統設定自己的顏色和亮度。所謂的一倍屏、二倍屏(retina)、三倍屏，指的是裝置以多少物理畫素來顯示乙個css畫素，也就是說，多倍屏以更多更精細的物理畫素點來顯示乙個css畫素點，在普通螢幕下1個css畫素對應1個物理畫素，而在retina螢幕下，1個css畫素對應的卻是4個物理畫素。

③css畫素：是乙個抽像的單位，主要使用在瀏覽器上，用來精確度量web頁面上的內容。一般情況之下，css畫素稱為與裝置無關的畫素(device-independent pixel)，簡稱dips。css畫素顧名思義就是我們寫css時所用的畫素。

④裝置畫素比dpr(device pixel ratio)：

其定義了物理畫素和裝置獨立畫素的對應關係。它的值可以按下面的公式計算得到：

裝置畫素比＝物理畫素 / 裝置獨立畫素。

在retina屏的iphone上，devicepixelratio的值為2，也就是說1個css畫素相當於2個物理畫素。通常所說的二倍屏(retina)的dpr是2, 三倍屏是3。(通常說的二倍背景圖就是解決失真問題)

⑤螢幕畫素密度ppi(pixel per inch)：螢幕畫素密度是指乙個裝置表面上存在的畫素數量，它通常以每英吋有多少畫素來計算(ppi)。螢幕畫素密度與螢幕尺寸和螢幕解析度有關，在單一變化條件下，螢幕尺寸越小、解析度越高，畫素密度越大，反之越小。

①適配目標：

②viewport的相關的屬性（如果任何設定都沒有，就是預設設定）

<
meta 
name
="viewport"
content
="">

③適配設定：（emment語法：mate：ev + tab鍵）

<
meta 
name
="viewport"
content
="width=device-width,initial-sacle=1.0,user-scalable=no"
>

移動端適配問題

關於移動端適配問題

移動端適配

移動端適配

相關推薦