移動端h5頁面適配

張率功發(fā)布于2019-08-22 18:18 / 1152人閱讀

摘要：一直對頁面充滿崇敬揣著忐忑的心開始了我的之旅。但實際情況卻并非如此理由如上但在移動設(shè)備上，必須弄明白這點。其他品牌的移動設(shè)備也是這個道理。

一直對h5頁面充滿崇敬,揣著忐忑的心開始了我的h5之旅。才發(fā)現(xiàn)直接照抄網(wǎng)上的方案是很容易,但是想真的了解內(nèi)部的原理,這就給我了一個下馬威了.通過在網(wǎng)上各種找資料,才將各種概念以及原理了解清楚.故寫下這篇文章用于積累知識,如有問題,歡迎指正!

在開始做手機端適配的時候我們需要去了解一些概念 1.設(shè)備像素

先來看看很多資料上面的描述

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

總結(jié)的說: 就是像素就相當于我們?nèi)粘Ｋf的的厘米(cm)、米(m)、克(g)這些度量單位,但稍微有些不同的是它是個相對單位,對于不同的設(shè)備中它對應(yīng)的英寸數(shù)是不一樣的.設(shè)備像素就是這個設(shè)備上總共有多少個這樣的單位像素

2.css中的px 等同于設(shè)備獨立像素

這個也是一個相對單位,所以它在一個設(shè)備中具體表現(xiàn)為多少英尺不確定,除受到設(shè)備寬度影響外還有以下兩點可以影響它。

1、屏幕布局視口大小
2、屏幕的分辨率

由上概念我們知道 1設(shè)備像素 ≠ 1css像素

那為什么我們以前在做web端網(wǎng)頁的時候沒有考慮過這個問題呢?

在桌面瀏覽器中css的1個像素往往都是對應(yīng)著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設(shè)備的物理像素。但實際情況卻并非如此(理由如上),但在移動設(shè)備上，必須弄明白這點。在早先的移動設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術(shù)的發(fā)展，移動設(shè)備的屏幕像素密度越來越高，從iphone4開始,蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設(shè)備也是這個道理。例如安卓設(shè)備根據(jù)屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五花八門，安卓設(shè)備上的一個css像素相當于多少個屏幕物理像素，也因設(shè)備的不同而不同，沒有一個定論。

這兩個概念不同對我們在開發(fā)h5頁面產(chǎn)生什么樣的影響呢,哈哈,應(yīng)該你會說這不廢話嗎,當然是不能夠?qū)⒃O(shè)計師的設(shè)計稿百分百的還原到手機上,嗯,是的你說的沒錯,那怎樣才能做到百分百的還原呢?這里面先買個關(guān)子,后面我們慢慢來分析.

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

先來一張圖

分辨率這個概念相信大家接觸的都不少,我們都知道同種寬高屏幕下分辨率越高屏幕的清晰度也就越高.為什么這樣呢?因為設(shè)備像素就是屏幕中一個個的點,設(shè)備分辨率就是橫向點的個數(shù) * 縱向點的個數(shù), 這一個點就是一個一個的馬賽克色塊,同物理寬度的范圍內(nèi)這種馬賽克色塊越多顯然我們看到的顏色也就越清晰.

設(shè)備分辨率在設(shè)備出廠時就已經(jīng)定了,并不能更改了.讀到這可能有人就有疑惑了,我們在用電腦的時候可都是可以調(diào)節(jié)分辨率的

電腦上面調(diào)整分辨率的時候,其實我怎么調(diào)它的像素點數(shù)還是那么多的.不信你看電腦,人家系統(tǒng)給你推薦的是1366px  768px的分辨率,你知道意味著什么嗎？沒錯，微軟在這塊屏幕上橫向設(shè)置了768個像素，豎向設(shè)置1366個像素。再怎么拉扯，這個數(shù)字是不會變了。那么，為啥我還能調(diào)整分辨率呢？我要是調(diào)整到800px  600px，按照定義，橫向就是60個像素，豎向就是800個像素了啊。其實呢，你把分辨率調(diào)800  600,系統(tǒng)就會分配給你800  600個有效像素個數(shù)，也就是真實的色彩塊。其他的個數(shù)呢，就由系統(tǒng)自作主張，通過一系列運算給你一個模擬色彩塊，填充成正好1366*768個色彩塊。這些拿來充數(shù)的像素塊，和真實的像素塊放到一起。就好比一個正規(guī)軍，里面摻了很多雜牌軍一樣，只能是隊伍不好帶了

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

計算公式 PPI = 屏幕對角線的像素數(shù)/屏幕對角線的長度。
由此我們可以知道PPI越大屏幕的清晰度越高

5.視口viewport

布局視口,布局視口是看不見的，瀏覽器廠商設(shè)置的一個固定值，一般是768px~1024px之間。這里我們可以認為它是一個畫板用于展示網(wǎng)頁。

視覺視口,瀏覽器可視區(qū)域的大小，即用戶看到的網(wǎng)頁的區(qū)域,繼承布局視口的寬度,所以我們在一個布局視口為980px的瀏覽器上一行上是可以放980px(css像素)內(nèi)容的.

理想視口,它對設(shè)備來說是最理想的布局視口，用戶不需要對頁面進行縮放就能完美的顯示整個頁面。這個理想的寬度是指以CSS像素單位計算的寬度，即屏幕的邏輯像素寬度，跟設(shè)備的物理寬度沒有關(guān)系。在css中，這個寬度就相當于100%的所代表的那個寬度。

6.那我們該怎么做才能百分百的還原網(wǎng)頁呢?

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

1px 的css像素不代表1設(shè)備像素了,這樣在dpr>1的時候,我們會明顯的發(fā)現(xiàn)我們設(shè)置的1px像素的東西明顯的看著粗一些

頁面無法相對于設(shè)計稿等比例的縮放

我們的目的是將1設(shè)備像素等于1css像素,鑒于這個目的我們說說我的方案.具體代碼可看我寫的demo
根據(jù)不同屏幕來動態(tài)寫入font-size和改變布局視口，并以rem作為寬度單位

1.使用meta標簽對viewport進行設(shè)置達到1css像素等于1個設(shè)備像素以dpr為2為例即

解釋: 首先我們要知道如果不設(shè)置meta viewport標簽，那么移動設(shè)備上瀏覽器默認的layout viewport寬度值為980px，1024px等這些,所以第一步我們先將視口寬度設(shè)置和布局寬度一樣即在html頭部設(shè)置（這個時候我們不做下一步的操作也能做到自適應(yīng)網(wǎng)頁，但有1px的問題存在，我們可以通過接下來的這一步來解決這個問題）。然后通過js來獲取不同的dpr獲取scale=1/dpr來設(shè)置這樣設(shè)置就可以解決1px的問題了

2.將屏幕分為固定的塊數(shù)10：作為1rem所代表的px值 ,并給html設(shè)置font-size為這個值

注:屏幕即布局視口可通過document.documentElement.clientWidth獲得.這里將屏幕分成10等份,當然你也可以分成其他等份,不過最好是10的倍數(shù),這樣我們算出的rem小數(shù)點也會少些,這樣還原度也會高些)`

這樣在任何屏幕下，總長度都為10rem。1rem對應(yīng)的值也不固定，與屏幕的布局視口寬度有關(guān)。

3.量取psd獲得px值并除于1個rem代表的px數(shù)獲得對應(yīng)rem值,這個轉(zhuǎn)化有多種方式我主要用過以下兩種方式

使用sublime text中的插件來實現(xiàn)轉(zhuǎn)換,具體怎么做可參照這個
使用postcss的插件postcss-pxtorem,具體可參照

關(guān)于文字 : 我這邊用的方案中字體大小也是使用rem，也就意味著我們的段落文字隨著屏幕增大，等比例縮放，這樣一行所展示的文字個數(shù)也一樣。這只是其中的一個方案，還有一種文字不使用rem作為單位，這樣就需要針對字體做特殊的處理，使用一些預(yù)處理或者后處理的方式，針對dpr不同計算出不同dpr下文字對應(yīng)的大小，這種方案可參考中有說明;

總結(jié)

哈哈,終于將這篇文章寫完了,總結(jié)一哈