移動端的視口/像素基本知識
一、屏幕尺寸
指屏幕對角線的長度，單位是英寸，1英寸=2.54cm
二、屏幕分辨率（物理像素）
指在橫縱方向上的像素點，單位是px，1px=1個像素點。這裏的1像素指的是設備的1個物理像素點。如第一點中的圖，iphone6的分辨率為750*1334px，即是橫向上有750個物理像素點，縱向上有1334個物理像素點。
三、像素密度（pixels per inch,PPI）
屏幕上每英寸可以顯示的像素點的數量，單位ppi；屏幕像素密度與屏幕尺寸和屏幕分辨率有關。以上圖的iphone6的為例： 開方(750*750+ 1334*1334)/ 4.7英寸 = 326 ppi
四、位圖像素
1個位圖像素對應1個物理像素，圖片才能得要完美清晰的展現(不失真，不銳化)。要顯示寬度為30px*18px（CSS像素）的照片，在DPR為2的情況下，對應的圖片需要為60px*36px；DPR為3的情況下，對應的圖片需要為90px*54px；基於此種情況，移動端的圖片一般需要設計2套，以適應不同的像素比。
五、設備獨立像素
設備獨立像素是CSS像素和物理像素之間轉換的很重要的關鍵點；在設置了width=device-width時，那麽設備獨立像素就等於CSS像素；
五、像素比
定義：設備物理像素比上設備獨立像素；
公式：devicePixelRatio = 設備物理像素（分辨率） / 設備獨立像素（近似CSS像素）；
以iphone6plus為例：DPR = 1080 / 414 ≈ 3
通過JS獲取：window.devicePixelRatio
通過CSS獲取：@media only screen and (-webkit-min-device-pixel-ratio:2){}
六、布局視口（layout viewport）
在移動設備上，為了容納為電腦瀏覽器設計的網站，默認的布局視口的寬度遠大於移動設備屏幕的寬度；布局視口的出現，在極大程度上幫助了桌面網站到移動設備上的轉移。以下是常見的移動端瀏覽器的布局視口值，單位為px（CSS像素），該值是不可變的（布局視口不變，和性能有關系，如果布局視口變化了，那麽就會觸發重匯重排），可以通過document.documentElement.clientWidth來獲取布局視口值。
當網頁的寬度大於以上的值時，就會出現橫向滾動條。
在這種情況下，以上面的iphone5為例，寬度占滿的時候，需要640個物理像素，換而言之，需要980px的CSS像素，其對應的像素比為：640/980；而對於iphone6而言，寬度占滿的時候，需要750個物理像素，換而言之，需要980px的CSS像素，其對應的像素比為：750/980；這裏說明了，在沒有設置width=device-width的情況下，針對不同的移動設備，該像素比值是變化不固定的，此種情況是難於做適配的。
另一種情況，設置了width=device-width的情況下，即是布局視口的寬度等於設備獨立像素，這種情況下，CSS像素就等於設備獨立像素了；
七、視覺視口（visual viewport）
用戶看到的網站展示區域，一般視覺視口和設備寬度一致。並且它的CSS像素的數量會隨著用戶縮放而改變，單位是px（CSS像素）；該值是可變的（縮放情況下）。可以通過window.innerWidth獲取。
八、縮放
1.用戶放大：一個CSS像素的面積變大，視覺視口內的CSS像素個數變少，視覺視口的尺寸變小（能看到的內容變少了，所以視覺視口變小）；切記，布局視口的大小是不變的，沒有設置width=device-width的情況下，布局視口是980px；設置了width=device-width的情況下，布局視口的大小等於設備獨立像素。
2.用戶縮小：一個CSS像素的面積變小，視覺視口內的CSS像素個數變多，視覺視口的尺寸變多（能看到的內容變多了，所以視覺視口變大）；切記，布局視口的大小是不變的，沒有設置width=device-width的情況下，布局視口是980px；設置了width=device-width的情況下，布局視口的大小等於設備獨立像素。
3.系統縮放：在meta標簽中使用initial-scale=1.0，該initial-scale值改變的是布局視口和視覺視口，而width=device-width改變的是布局視口，所以下面的兩個例子的效果是一樣的；當布局視口超過視覺視口才會出現滾動條，滾動條和視覺視口有關的。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 7 <title>系統縮放1</title> 8 <style media="screen"> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 #div1{ 14 width: 187px; 15 height: 200px; 16 background: blue; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="div1"></div> 22 </body> 23 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1.0"> 6 <title>系統縮放2</title> 7 <style media="screen"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #div1{ 13 width: 187px; 14 height: 200px; 15 background: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div1"></div> 21 </body> 22 </html>
initial-scale值的變化對布局視口和視覺視口的影響：在iphone6下，該值變大的時候，CSS元素的面積變大，看到的內容變少了，所以布局視口和視覺是變小了；反之，設置initial-scale為0.5時，布局視口和視覺視口都會變大，變為750.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=2.0"> 6 <title>系統縮放2</title> 7 <style media="screen"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #div1{ 13 width: 100px; 14 height: 200px; 15 background: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div1"></div> 21 </body> 22 </html>
九、width=device-width和initial-scale之間的沖突
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=0.5"> 6 <title>沖突</title> 7 <style media="screen"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #div1{ 13 width: 375px; 14 height: 50px; 15 background: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div1"></div> 21 </body> 22 </html>
如果設置了initial-scale的值為2.0，那麽布局視口和視覺視口為187.5px，而width=device-width設置的布局視口大小為375px；誰大聽誰的，所以最終的布局視口和視覺視口的大小都是375px。
十、完美視口
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
width=device-width：設置布局視口的大小等於設備獨立像素；
initial-scale=1.0：設置布局視口和視覺視口的大小等於設備獨立像素；
user-scalable=no：不允許用戶進行縮放；
minimum-scale和maximum-scale分別這只最小的縮放為1.0，最大的縮放為1.0，表示不允許用戶進行縮放操作。
移動端的視口/像素基本知識