移動端h5頁面適配

一直對h5頁面充滿崇敬,揣着忐忑的心開始了個人h5之旅。才發現直接照抄網上的方案是很容易,可是想真的瞭解內部的原理,這就給我了一個下馬威了.經過在網上各類找資料,纔將各類概念以及原理了解清楚.故寫下這篇文章用於積累知識,若有問題,歡迎指正!

在開始作手機端適配的時候咱們須要去了解一些概念

1.設備像素

先來看看不少資料上面的描述

它是物理概念，指的是設備中使用的物理像素(Physic pixel)。這個單位用px表示，它是一個[相對絕對單位]———— 即在一樣一個設備上，每1個設備像素所表明的物理長度(如英寸)是固定不變的(即設備像素的絕對性); 但在不一樣的設備之間，每1個設備像素所表明的物理長度(如英寸)是能夠變化的(即設備像素的相對性);

總結的說: 就是像素就至關於咱們平常所說的的釐米(cm)、米(m)、克(g)這些度量單位,但稍微有些不一樣的是它是個相對單位,對於不一樣的設備中它對應的英寸數是不同的.設備像素就是這個設備上總共有多少個這樣的單位像素

2.css中的px 等同於設備獨立像素

這個也是一個相對單位,因此它在一個設備中具體表現爲多少英尺不肯定,除受到設備寬度影響外還有如下兩點能夠影響它。

一、屏幕布局視口大小
二、屏幕的分辨率

由上概念咱們知道 1設備像素 ≠ 1css像素

那爲何咱們之前在作web端網頁的時候沒有考慮過這個問題呢?

在桌面瀏覽器中css的1個像素每每都是對應着電腦屏幕的1個物理像素，這可能會形成咱們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際狀況卻並不是如此(理由如上),但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率爲320x480，在iphone3上，一個css像素確實是等於一個屏幕物理像素的。後來隨着技術的發展，移動設備的屏幕像素密度愈來愈高，從iphone4開始,蘋果公司便推出了所謂的Retina屏，分辨率提升了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味着一樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。其餘品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素密度可分爲ldpi、mdpi、hdpi、xhdpi等不一樣的等級，分辨率也是五花八門，安卓設備上的一個css像素至關於多少個屏幕物理像素，也因設備的不一樣而不一樣，沒有一個定論。

這兩個概念不一樣對咱們在開發h5頁面產生什麼樣的影響呢,哈哈,應該你會說這不廢話嗎,固然是不可以將設計師的設計稿百分百的還原到手機上,嗯,是的你說的沒錯,那怎樣才能作到百分百的還原呢?這裏面先買個關子,後面咱們慢慢來分析.

3.設備分辨率(設備分辨率的單位就是上面所說的設備像素)

先來一張圖

分辨率這個概念相信你們接觸的都很多,咱們都知道同種寬高屏幕下分辨率越高屏幕的清晰度也就越高.爲何這樣呢?由於設備像素就是屏幕中一個個的點,設備分辨率就是橫向點的個數 * 縱向點的個數, 這一個點就是一個一個的馬賽克色塊,同物理寬度的範圍內這種馬賽克色塊越多顯然咱們看到的顏色也就越清晰.

設備分辨率在設備出廠時就已經定了,並不能更改了.讀到這可能有人就有疑惑了,咱們在用電腦的時候可都是能夠調節分辨率的

電腦上面調整分辨率的時候,其實我怎麼調它的像素點數仍是那麼多的.不信你看電腦,人家系統給你推薦的是1366px 768px的分辨率,你知道意味着什麼嗎？沒錯，微軟在這塊屏幕上橫向設置了768個像素，豎向設置1366個像素。再怎麼拉扯，這個數字是不會變了。那麼，爲啥我還能調整分辨率呢？我要是調整到800px 600px，按照定義，橫向就是60個像素，豎向就是800個像素了啊。其實呢，你把分辨率調800 600,系統就會分配給你800 600個有效像素個數，也就是真實的色彩塊。其餘的個數呢，就由系統自做主張，經過一系列運算給你一個模擬色彩塊，填充成正好1366*768個色彩塊。這些拿來充數的像素塊，和真實的像素塊放到一塊兒。就比如一個正規軍，裏面摻了不少雜牌軍同樣，只能是隊伍很差帶了

4.屏幕像素密度(PPI,每英尺展現的像素塊數)

計算公式 PPI = 屏幕對角線的像素數/屏幕對角線的長度。
由此咱們能夠知道PPI越大屏幕的清晰度越高

5.視口viewport

• 佈局視口,佈局視口是看不見的，瀏覽器廠商設置的一個固定值，通常是768px~1024px之間。這裏咱們能夠認爲它是一個畫板用於展現網頁。
• 視覺視口,瀏覽器可視區域的大小，即用戶看到的網頁的區域,繼承佈局視口的寬度,因此咱們在一個佈局視口爲980px的瀏覽器上一行上是能夠放980px(css像素)內容的.
• 理想視口,它對設備來講是最理想的佈局視口，用戶不須要對頁面進行縮放就能完美的顯示整個頁面。這個理想的寬度是指以CSS像素單位計算的寬度，即屏幕的邏輯像素寬度，跟設備的物理寬度沒有關係。在css中，這個寬度就至關於100%的所表明的那個寬度。

6.那咱們該怎麼作才能百分百的還原網頁呢?

首先咱們先想一想上面這些所帶來的影響:

• 1px 的css像素不表明1設備像素了,這樣在dpr>1的時候,咱們會明顯的發現咱們設置的1px像素的東西明顯的看着粗一些
• 頁面沒法相對於設計稿等比例的縮放

咱們的目的是將1設備像素等於1css像素,鑑於這個目的咱們說說個人方案.具體代碼可看我寫的demo
根據不一樣屏幕來動態寫入font-size和改變佈局視口，並以rem做爲寬度單位

• 1.使用meta標籤對viewport進行設置達到1css像素等於1個設備像素 以dpr爲2爲例 即 <meta name="viewport" content="width=device-width,initial-scale=0.5,max-scale=0.5,min-scale=0.5">

  解釋: 首先咱們要知道若是不設置meta viewport標籤，那麼移動設備上瀏覽器默認的layout viewport寬度值爲980px，1024px等這些,因此第一步咱們先將視口寬度設置和佈局寬度同樣即在html頭部設置<meta name="viewport" content="width=device-width,initial-scale=1">（這個時候咱們不作下一步的操做也能作到自適應網頁，但有1px的問題存在，咱們能夠經過接下來的這一步來解決這個問題）。而後經過js來獲取不一樣的dpr獲取scale=1/dpr來設置<meta name="viewport" content="width=device-width,initial-scale=scale,max-scale=scale,min-scale=scale">這樣設置就能夠解決1px的問題了

• 2.將屏幕分爲固定的塊數10：做爲1rem所表明的px值 ,並給html設置font-size爲這個值

  注:屏幕即佈局視口可經過document.documentElement.clientWidth得到.這裏將屏幕分紅10等份,固然你也能夠分紅其餘等份,不過最好是10的倍數,這樣咱們算出的rem小數點也會少些,這樣還原度也會高些)`

這樣在任何屏幕下，總長度都爲10rem。1rem對應的值也不固定，與屏幕的佈局視口寬度有關。

• 3.量取psd得到px值併除於1個rem表明的px數得到對應rem值,這個轉化有多種方式我主要用過如下兩種方式

  使用sublime text中的插件來實現轉換,具體怎麼作可 參照這個
  使用postcss的插件postcss-pxtorem, 具體可參照

• 關於文字 : 我這邊用的方案中字體大小也是使用rem，也就意味着咱們的段落文字隨着屏幕增大，等比例縮放，這樣一行所展現的文字個數也同樣。這只是其中的一個方案，還有一種文字不使用rem做爲單位，這樣就須要針對字體作特殊的處理，使用一些預處理或者後處理的方式，針對dpr不一樣計算出不一樣dpr下文字對應的大小，這種方案可參考中有說明;

總結

哈哈,終於將這篇文章寫完了,總結一哈😄

• 一、設備像素是設備分辨率的單位，設備像素和設備分辨率自設備出廠後就已經固定,因此一個設備它的設備像素和設備分辨率是不變的
• 二、DPR = 設備像素/CSS像素 = 設備像素 / 設備獨立像素 ~= PPI/160 = 頁面縮放比例 DPR = 設備像素/CSS像素是基於layout viewport一致的狀況
• 三、CSS像素 = 設備獨立像素 = 邏輯像素
• 四、現代瀏覽器中實現縮放的方式都是「拉伸」像素：即每CSS像素單位表明的長度發生變化，而像素總數字不變。因此縮放會引發CSS像素的變化。
• 五、進行縮放時，visual viewport的尺寸會發生變化，layout viewport的尺寸保持不變
• 六、css中的1px並非表明設備像素上的1px
• 七、移動設備分辨率越大，css中1px表明的物理像素就會越多，devicePixelRatio的值也越大
• 八、ideal viewport的寬度等於移動設備的屏幕寬度(這個理想的寬度是指以CSS像素單位計算的寬度，即屏幕的邏輯像素寬度)，跟設備的物理寬度沒有關係。同一個設備的ideal viewport的寬度固定不變。
• 九、width=device-width和initial-scale=1.0的功能基本同樣width=device-width在IPhone和IPad上存在兼容問題;initial-scale=1.0在IE上存在兼容問題

參考連接(特別感謝如下博客的做者)

移動前端開發之viewport的深刻理解深刻理解移動端像素知識與Viewport知識Meta viewport (視口元信息標籤)移動端頁面適配———多方案解析