html viewport標籤說明

先來羅列下學習移動頁面重構的過程當中可能看到過迷糊過放棄過的一些單位：

px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi……

接下來分類給你們介紹下：

① 什麼是絕對長度單位？什麼是相對長度單位？

② 什麼是屏幕尺寸、屏幕分辨率、屏幕像素密度？

③ 什麼是ppi、dpi、dp、dip、sp、px？他們之間的關係是什麼？

④ 什麼是mdpi、hdpi、xdpi、xxdpi？如何計算和區分？

一、什麼是絕對長度單位？什麼是相對長度單位？

絕對長度單位：in（inch英寸）、cm（釐米）、mm（毫米）、pt（磅）、pc（pica）。in、cm、mm和實際中的經常使用單位徹底相同。pt是標準印刷上經常使用的單位，72pt的長度爲1英寸。pc也是印刷上用的單位，1pc的長度爲12磅。絕對長度單位，雖然理解起來很容易，可是在網頁的設計中不多用到。因此咱們就忽略它們吧。

二、什麼是屏幕尺寸、屏幕分辨率、屏幕像素密度？

屏幕尺寸：指屏幕的對角線的長度，單位是英寸，1英寸=2.54釐米。常見的屏幕尺寸有2.四、2.八、3.五、3.七、4.二、5.0、5.五、6.0等。

屏幕分辨率：指在橫縱向上的像素點數，單位是px，1px=1個像素點。通常以縱向像素*橫向像素來表示一個手機的分辨率，如1960*1080。（這裏的1像素值得是物理設備的1個像素點）

屏幕像素密度：屏幕上每英寸能夠顯示的像素點的數量，單位是ppi，即「pixels per inch」的縮寫。屏幕像素密度與屏幕尺寸和屏幕分辨率有關，在單一變化條件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

最明顯的就是iPhone 3GS和iPhone 4的區別。屏幕尺寸同樣，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。

計算像素密度的公式：

勾股定理算出對角線的分辨率：√(1920^2+1080^2)≈2203px

對角線分辨率除以屏幕尺寸：2203/5≈440dpi。

三、什麼是ppi、dpi、dp、dip、sp、px？

ppi：pixels per inch，屏幕上每英寸能夠顯示的像素點的數量，即屏幕像素密度。

dpi：dots per inch，最初用於衡量打印物上每英寸的點數密度，就是打印機能夠在一英寸內打多少個點。當dpi的概念用在計算機屏幕上時，就稱之爲ppi。ppi和dpi是同一個概念，Android比較喜歡使用dpi，IOS比較喜歡使用ppi。

dp、dip：dp和dip都是Density Independent Pixels的縮寫，密度獨立像素，能夠想象成是一個物理尺寸，使一樣的設置在不一樣手機上顯示的效果看起來是同樣的。

在Android中，規定以160dpi爲基準，1dp=1px。若是密度是320dpi，則1dp=2px，以此類推。

Android和IOS都會經過轉換系數讓控件適應屏幕的尺寸。一個按鈕給了44*44dp的大小，在160dpi密度的時候，按鈕就是44*44px大小；在320dpi密度的時候，按鈕就是88*88px的大小。不須要咱們去書寫多套尺寸。

sp：scale independent pixels，用法與dp相似，是專門用來定義文字大小的，受用戶android設備字體設置的影響。

px：就是一般所說的像素，使網頁設計中使用最多的長度單位。將顯示器分紅很是細小的方格，每一個方格就是一個像素。（網頁重構中使用的px和屏幕分辨率的px不必定是同樣的大小。）

四、什麼是mdpi、hdpi、xdpi、xxdpi？

Google官方指定按照下列標準區分不一樣設備的dpi：

蘋果的區分則更爲簡單：非高清屏、高清屏、超高清屏。

從數值上看，蘋果和安卓有這樣的對應關係：

單位介紹完了。總結下如何使咱們更好的理解本身的工做。咱們重構移動頁面的時候使用px其實跟安卓開發中使用dp是同樣的，有個背後的係數會幫咱們把數值適配到這款手機的大小。而這個係數就是上圖的1x、2x、3x……這個係數怎麼來？是依靠分辨率和屏幕尺寸計算到的屏幕像素密度，再看屏幕像素密度屬於哪一個係數等級。

以上是單位的介紹，下面再來認識個重要的知識點。

Viewpoint

手機瀏覽器是把頁面放在一個虛擬的「窗口」（viewport）中，窗口可大於或小於手機的可視區域，通常手機默認viewport大於可視區域。這樣不會破壞沒有針對手機瀏覽器優化的網頁的佈局，用戶能夠經過平移和縮放來看網頁的其餘部分。

部分機型默認viewport大小：

咱們可能會這樣設置viewport：

每一個設置對應的是：

這個頁面背景圖是做爲背景給了background-size:100%;的，因此整好鋪滿整個屏幕，大小看起來很適合。而上面的元素使用固定的px值來賦予大小的，例如左上角的人頭給了width:100px;height100%;。爲何二者分別是這樣子顯示的？

 

網頁重構時使用的單位px，就是一般所說的像素，是網頁設計中使用最多的長度單位。將顯示器分紅很是細小的方格，每一個方格就是一個像素（這和咱們理解的屏幕分辨率的1920px*1080px的px是不一樣的）。不一樣設置下，方格的大小不同。

例如iPhone4S若是不設置viewport，他就會默認是980px，就像把屏幕分紅980份（不是屏幕分辨率的640px哦！）。若是設置一個元素爲100px*100px，看起來就是屏幕的100/980，可能以下圖所示：

例如iPhone4S若是設置viewport width=device-width，他就會是320px，就像把屏幕分紅320份（不是屏幕分辨率的640px哦！）。若是設置一個元素爲100px*100px，看起來就是屏幕的100/320，可能以下圖所示：

未設置viewport，彈出來的都是設備的默認寬度，基本是980px，除了最後一臺三星老爺機是800px。

設置了viewport，width=device-width，彈出來的是設置好的寬度，375px、360px、320px。爲何是這個大小？這就要用到上面講的知識點了。

iPhone6的屏幕分辨率是1334*750px，ppi是326，因此係數是2x。那device-width就等於750/2=375px。

紅米1s的屏幕分辨率是1280*720px，ppi是312，因此係數是2x。那device-width就等於720/2=360px。

頁面裏的紅色塊給的是200*200px，在幾個設備看起來好像差很少大的樣子。

（上圖左邊是三星note4，右圖是紅米1s）

三星note4的屏幕分辨率是2560*1440px，ppi是515，因此係數是4x。那device-width就等於1440/4=360px，和小米的divice-width同樣大小。可是看起來左邊的紅色塊明顯大於右邊，由於左邊的設備大啊，雖然二者都是分紅360份，可是明顯左邊的1份比右邊的1份大。

以上解釋了爲何給元素賦予固定的像素值，給字體16px的大小，在大部分手機裏竟然能看起來差很少大小，也明白了咱們並不須要寫其餘尺寸來適配不一樣的屏幕大小。不知道我這樣拐彎的解釋你們能明白不？

對於應該按照多大的尺寸來設計移動網頁，這個看設計師喜歡，640是之前的主流，由於好多設計師用的是iPhone4S、5S。如今在慢慢轉向750，由於iPhone升級成6了。無論哪一種尺寸的設計稿，重構均可以用一套方法制做好頁面，若是是背景平鋪（background-size:100%）、上面的元素px設置大小的話，沒問題，能順利適配其餘手機的。若是是固定總體大小重構，再利用js判斷屏幕大小進行頁面縮放，也沒問題，能順利適配其餘手機的。重要的前提是要設置好正確的viewport。