移動端開發系列——像素與viewport

目錄

• 移動端開發的基本觀點

• 像素基礎知識

• viewport原理解析

• 彈性佈局

• 響應式設計

• 1rem的運用

• 移動端的事件

• zepto庫的使用

---

移動端開發的基本觀點

1. 移動端開發的意義
   移動端用戶使用量 -> 市場需求 -> 市場供給 -> 公司須要移動端開發人才 -> 工資高，就業易 -> 涌現大波程序猿 -> 到了猴年馬月，工資纔會降下來 -> 新的技術涌現，VR/AI -> 市場需求攀升 -> 重走一波老路......

扯遠了，以上大體就是學習移動端開發的動機；

1. 移動端開發的認識
   移動端開發就是手機端開發嗎？

No、No、No...
移動端是一個大的範疇，小羊認爲應該包括智能手機、平板在內的移動設備，主要是這二者；

1. 移動端開發入門的學習路徑
   目錄就是

---

像素基礎知識

先拋3個概念，
px(CSS pixels)：虛擬像素，能夠理解爲「直覺」像素，我要這個元素寬高10px；
dp(device pixels)：設備像素（物理像素），能夠理解爲實際的像素，這個寬高爲10px的元素在設備中實際用了多少個物理像素點表示；
dpr(device pixels ratio)：設備像素比，公式爲1px = (dpr)^2 * 1dp，能夠理解爲1px由多少個設備像素組成；

3個概念整合理解就是：
我爲一個元素設置的寬高爲10px，那麼實際在顯示設備中用多少個設備像素真實表示呢？
dpr=2的話，那麼1px由4個設備像素顯示，若是是10px，那麼顯示設備實際用40個dp去顯示10px；
dpr=1，則1px由1個設備像素顯示；
px和dp的區別就是直覺認爲只有10px和真實使用40dp；

爲何會出現dpr>=2的情形？dpr=1不是更加符合個人認知和理解嗎？

還不是人們爲了追求更高的分辨率所致，分辨率越高圖像越清晰！！！；

可是Mac的Retina屏和通常PC的在相同尺寸下，圖像卻清晰許多，爲腎？

dpr>=2所致啊！！！

別的品牌機子老老實實1px = 1dp，Mac倒是1px = 4 dp，因此你直覺認爲你們都使用一樣多的像素點表示圖像（這是沒錯滴），實際背後Mac用了多1倍（指的是dpr）的設備像素顯示圖像；

實際應用中，顯示設備不會直接給你個px和dpr

你實際看到的是如下的參數，下面是腎6Plus的顯示屏參數信息：

再拋幾個概念，可別暈咯...

英寸：這裏指的是屏幕主對角線的尺寸，1英寸=2.54cm，5.5英寸約等於14cm（13.97cm）

分辨率：1920*1080像素，這裏指的是物理像素（設備像素）

ppi（pixels per inch）：每英寸的像素點，這裏腎6Plus爲每英寸有401個像素點

那麼ppi是如何計算出來的呢？
顧名思義，每英寸的像素點（設備像素），已知屏幕分辨率和主對角線的尺寸，則ppi等於

var 斜邊尺寸 = V(1920^2+1080^2) V表明開根號
var ppi = 斜邊尺寸/5.5
ppi = 401ppi

如今咱們知道，ppi越高，每英寸像素點越多，圖像越清晰；

和先前的知識點有什麼關係？

畢竟這些參數是外國人先發明的，他們會優先選擇本身熟悉的計量單位做爲顯示設備的工廠標準參數，所以ppi就用做顯示設備的工業標準；

告訴業界人士，ppi達到多少是高清屏，此時對應的dpr是多少，而不直接告訴你我如今的顯示設備dpr是多少

畢竟人們直接聽到像素分辨率會更加有反應

下面是不一樣ppi對應的dpi：

ldpi	mdpi	hdpi	xhdpi
ppi	120	160	240	320
默認縮放比	0.75	1.0	1.5	2.0

【注】Retina屏都是dpr>=2的高清屏

腎6Plus的dpr爲3，是超高清屏；

到目前爲止，咱們瞭解到：
給你一個顯示設備，設備分辨率爲1920*1080，尺寸爲5.5英寸，能夠計算出其ppi = 401，根據ppi得知其dpr = 3，
由此能夠該設備1px = （3^2）dp，其虛擬像素爲1920/3 = 660px，1080/3 = 360px，即虛擬分辨率爲360*660；
此時，若是你在代碼設置元素的寬高爲360*660到的話，會發現它的實際尺寸就等於腎6Plus的屏幕尺寸；
【ppi】

---

viewport原理解析

一個頗有意思的現象是，當你把上面的代碼在chrome下使用設備模擬方式，模擬腎6Plus的時候，神奇的事情發生了，該元素設置的寬高明明就是手機的寬高，按常理應該佔據整個屏幕，實際倒是：

到底是怎麼一回事？，如何解決這一問題呢？

好吧，做爲實用主義者的大家（不是我喲），先講解決方案：

在meta標籤有一個viewport的屬性，能夠爲這個屬性設置width；
腎6Plus默認的width是980px，因此元素寬是360px，實際顯示的尺寸是360px*360/980=132.24px（不信能夠本身測試一下喲）；

如今只要將viewport的width設置爲360px，那麼元素就能夠佔滿全屏了；

如今就要引入另外一個概念：viewport

viewport的原理在於：

1. 先將頁面渲染在一個width爲顯示設備默認尺寸的viewport上，如腎6Plus爲980px；

2. 而後將viewport等比例縮放至整個手機屏幕上；

例如上例中，元素寬高爲360*600px，先將元素渲染在寬度爲980px的viewport上，而後等比例縮放在整個手機屏幕上；

viewport就是鏈接手機屏幕和頁面的中間層

爲何要畫蛇添足呢？

想象一下，若是沒有中間層，直接將一個頁面寬度爲980px的直接縮放至320px，那麼裏面的DOM節點將會進行重繪，頗有可能致使排版錯亂；
viewport的做用是將全部的DOM節點先繪在寬度爲980px的viewport上，而後整個viewport統一縮放，這樣就能保證排版的正確性；

關於viewport，涉及兩個概念：

• layout viewport：佈局viewport，能夠理解爲放置頁面的幕布

• visual vewport：視窗viewport，能夠理解爲屏幕的視窗
  好比：

腎6Plus的visual viewport的寬度爲360px，layout viewport爲980px；
360px是屏幕視窗的虛擬像素，980px是放置頁面的像素；

回顧一下，前面元素出現的縮放現象：

根據腎6Plus的物理分辨率1920*1080以及5.5英寸的屏幕，計算出ppi = 401-> dpr = 3 -> 虛擬分辨率爲640*360px；

畫一個寬度爲360px的元素，理應充滿整個手機屏幕 ，可是因爲viewport的做用 -> 360px的元素畫在980px的layout viewport上，而後等比例縮放在360px的visual viewport上-> 最終你看到的就是，360px的元素沒法填充整個屏幕；

先前的一個解決辦法是，改變layout viewport，即<meta name="viewport" content="width=360">，讓整個layout viewport就是360px，那麼元素將填充整個屏幕；

以上都是世界觀，給人一些概念性的理解，沒法實操，下面就是方法論

實際移動端開發，咱們只需關注layout viewport，知道每一個移動設備提供給咱們多大尺寸的幕布，可是移動設備型號那麼多，不可能一個個手動設置width呀！！！

• 動態設置layout viewport

<meta  name="viewport" content="width=device-width">

上面的設置表示讓layout viewport老是等於設備寬度，即visual viewport；

【注】細心的童鞋可能會注意到，腎6Plus的虛擬分辨率爲何不是640*360px，具體解答能夠參考知乎問答

• 獲取visual viewport和layout viewport的api

window.innerWidth：表示窗口的寬度（包含滾動條），即visual vewport的寬度
document.body.clientWidth：表示body元素的寬度（不包括border），即layout viewport的寬度

• 移動端其餘初始化設置

intial-scale:頁面首次顯示時，可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放；
no-scalable：是否容許縮放

一個完整的viewport屬性的設置爲：

<meta  name="viewport" content="width=device-width,initial-scale=1,no-scalable=no">

上述完整的意思是，layout viewport等於設備的寬度，首次顯示頁面時不進行縮放也不容許用戶縮放；

demo

小結

• 一開始講px/dp/dpr/ppi的意義在於鋪墊背景知識

• 理解上述知識後，給你一個移動設備的物理分辨率，如iPhone6 Plus19201080以及尺寸5.5inches，能夠計算出其ppi爲401->dpr = 3，從而測算出手機的虛擬分辨率爲640360px；

• 原則上，你開發一個640*360px的元素就能夠填充整個手機屏幕，可是因爲viewport機制做用，效果未達預期

• 由此引出viewport概念，viewport能夠分爲visual viewport（視窗尺寸）和layout viewport（放置頁面的「幕布「），iPhone6 Plus默認值爲980px；

• 經過meta標籤的viewport屬性，能夠動態設置layout viewport，實戰中只須要設置：

<meta  name="viewport" content="width=device-width,initial-scale=1,no-scalable=no">

• 你還能夠經過window.innerWidth和document.body.clientWidth（前提是不設置body的寬度）分別獲取visual viewport和layout viewport；