對於移動設備頁面尺寸的理解

爲移動設備製做前端頁面，每每會遇到不少使人迷惑的狀況，本文中，我整理了一些相關的概念和方法，與你們分享一下。

---

設備像素和CSS像素

css像素是固定不變的，瀏覽器上縮放的話，css像素會被拉伸或者縮小，設備像素不變

100%zoom ： css像素 和設備像素 一致

zoom被縮放 ： css像素在設備像素裏 被縮放

---

屏幕尺寸和窗口尺寸

屏幕尺寸和窗口尺寸較好理解

可是須要注意的是：當縮放窗口的時候，窗口尺寸更改了，這一點對於後面理解移動端尺寸有必定幫助

解釋：當放大頁面的時候，窗口尺寸變小了，爲何呢？由於窗口尺寸(window.innerWidth)的定義是窗口裏能展示的像素寬高，頁面放大了，頁面裏展示的css像素變少了，因此窗口尺寸變小了，相反縮小頁面的時候，窗口尺寸變大了。

---

pc上的viewport

viewport並不是是移動端的專利，viewport是瀏覽器內部的一個數據，它約束html的寬度。viewport基本等同於窗口尺寸，因此當你縮放窗口的時候viewport會改變，相應的html寬度也會改變。

這個例子中，因爲放大頁面，viewport變小，而頁面中的頭部藍條css設置爲100%，跟隨viewport變化，因此右側logo暴露了出來，藍條沒有覆蓋100%的文檔寬度，而只取viewport的寬度。

---

移動終端的viewport

移動終端的viewport更加麻煩一些，有兩種viewport，分別是展現viewport(visual viewport)和佈局viewport(layout viewport)。

上面這張圖片你能夠這麼理解：
手機是一個放大鏡，它遊走在頁面上，手機上展現的寬高爲visual-viewport,而整個頁面的寬高是layout-viewport。

好奇的朋友必定會問，爲何要這樣呢，何須這麼麻煩？這是由於手機的尺寸過小了，「移動瀏覽器廠商想給它們的客戶儘量的提供最好的體驗，這如今指的就是「儘量的跟桌面同樣」。所以耍一些花招是必要的。」

那麼，假如個人頁面沒有通過任何優化，手機默認的layout-viewport是多大呢，「layout viewport有多寬？每一個瀏覽器都不同。Safari iPhone爲980px，Opera爲850px，Android WebKit爲800px，最後IE爲974px。」

這就是爲何普通一個頁面在iphone上看會變得很大的緣由，iphone默認把你的頁面的viewport設置爲980px，也就是說html的100%寬度默認爲980px;

---

現代移動端網頁設計與viewport

雖然說visual-viewport是爲了用戶看得更清楚而作的設定，但實際上，這帶來了用戶體驗上的降低，用戶每每須要縮放和移動頁面。因此現代針對移動端的網頁設計（或者響應式設計）一般採用的方法是，精簡頁面內容，放大視覺元素，避免體驗很差的縮放和移動頁面。包括boostrap在內的衆多前端框架也無不在設計上採用這種解決方案。

要知足這種設計，首先要保證一件事情就是，讓layout-viewport就是visual-viewport，消除兩個viewport帶來的頁面差別。

蘋果公司推進的的viewport meta能夠解決這個問題，viewport的主要做用是指定layout-viewport的大小。

好比：

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

這個設定其實就是讓layout-viewport和visual-viewport保持一致，回想一下上面那張把手機當作放大鏡的圖片，有了這個設定之後，手機就不是放大鏡了，而是把整個頁面裝在手機裏。

此外，viewport還能夠設置 initial-scale , user-scalable

---

蘋果給的一些例子

關於Viewport，safari的開發官網給了一些例子，能夠加深咱們對這個問題的理解：

能夠看到決定頁面展現效果的兩個因素，width和scale，scale相似pc端的放大縮小

一個默認寬度爲100%頁面的樣子

默認寬度 + initial scale = 1.0

寬度設爲320 + 默認 initial scale

參考：
http://weizhifeng.net/viewports2.html
http://weizhifeng.net/viewports.html
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html