viewport、像素、分辨率

移動端web所遇屏幕適配問題：

解決：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

//這一行代碼告訴瀏覽器，佈局視口的寬度應該與理想視口的寬度一致，能夠讓網頁的寬度自動適應手機屏幕的寬度，利用瀏覽器自身縮放完成適配

做用：該meta標籤的做用是讓當前viewport(設備獨立像素layout viewport)的寬度等於設備的寬度(設備物理像素)，同時不容許用戶手動縮放。也許允不容許用戶縮放不一樣的網站有不一樣的要求，但讓viewport的寬度等於設備的寬度，這個應該是你們都想要的效果，若是你不這樣的設定的話，那就會使用那個比屏幕寬的默認viewport(瀏覽器默認的layout viewport)，也就是說會出現橫向滾動條。

 

詳解以下： 

---

【viewport】

 

需知概念：視覺視窗、佈局視窗、理想視窗

【visual viewport】(視覺視窗) ，表明瀏覽器可視區域的大小，寬度能夠經過 window.innerWidth 來獲取

【layout viewport】(佈局視窗) ，一個較寬的值，寬度能夠經過 document.documentElement.clientWidth 來獲取

【ideal viewport】(理想視窗)，不須要用戶縮放和橫向滾動條就能正常的查看網站的全部內容的寬度，  ideal viewport的寬度 = 屏幕的邏輯像素寬度

 

 

---

【像素】

 

需知概念：設備獨立像素，設備物理像素、css像素

【設備獨立像素】

【設備物理像素】

【css像素】

 

CSS像素 =設備獨立像素 = 邏輯像素

設備像素 =設備物理像素 = 物理像素

 

相關參考：

什麼是viewport，爲啥須要viewport

http://www.myexception.cn/mobile/428756.html