視口（viewport）原理詳解之第二部分（移動端瀏覽器）

1、移動端瀏覽器的問題

　　當咱們把移動端瀏覽器和桌面瀏覽器比較時，最明顯的差別就是尺寸。移動端瀏覽器尺寸要比桌面屏幕小得多，移動瀏覽器最多差很少也就400px。最重要的問題集中在咱們的CSS上，特別是viewport的尺寸。當咱們把桌面瀏覽器的尺寸複製到咱們移動端時，效果無疑是可怕的（要麼過小看不清，要麼只能顯示局部）。

　　咱們來看咱們上節常常拿來舉例的width:10%的側邊欄。若是移動端瀏覽器和桌面瀏覽器設置的徹底同樣，側邊欄最多也就40px，這就太窄了。

　　一種解決方式是專門爲移動端寫一個網頁，但無疑成本開銷會很大。

 

2、可視視口和佈局視口（visual viewport and the layout viewport）

　　解決上述問題一個明顯方案是擴大viewport，這就須要將視口分紅兩個：視覺視口和佈局視口。

　　在 Stack Overflow上看到一個解釋很好：

Imagine the layout viewport as being a large image which does not change size or shape. Now image you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.

　　可視視口就是展現在屏幕上的部分，用戶可能滑動來改變可視區域，或者縮放來改變可視區域的大小。

　　可是CSS佈局，特別是百分度長寬，是根據佈局視口來計算的，無疑比可視視口大不少。

　　所以，html元素最初是佔據佈局視口的空間，你的CSS也是根據此來編輯。這就肯定了你的網站佈局方式跟在桌面瀏覽器保持一致。

 

3、理解佈局視口

　　爲了理解佈局視口的尺寸，咱們將網頁縮小到充滿整個移動瀏覽器窗口。這時屏幕的尺寸就是佈局視口的尺寸。

　　所以，視口布局的長寬就等於在屏幕上展現的尺寸。當用戶放大時，這些尺寸保持不變。

　　佈局視口寬度老是不變的。若是你旋轉你的手機，可視視口改變，但瀏覽器爲了適應這個旋轉，會放大一些可視寬度，但佈局視口大小依然不變。

 

4、測量佈局視口

document.documentElement.clientWidth 和 -Height

　　旋轉影響高度，但不影響寬度。

 

5、測量可視視口

 window.innerWidth/Height，很顯然，這些指標隨着縮放而改變。

　　不幸的是，不一樣瀏覽器差異很大。

 

6、屏幕

　　在桌面瀏覽器中，screen.width/height能夠獲得屏幕尺寸。可是實際上開發者也不必關心。

 

7、滑動距離（Scrolling offset）

　　若是你想知道可視視口相對佈局視口的位置，你能夠用 window.pageX/YOffset

 

8、html元素

　　用document.documentElement.offsetWidth/Height能夠得到html元素的大小。

 

9、媒體查詢

　　媒體查詢的工做方式跟桌面瀏覽器同樣。width/height相對於佈局視口，device-width/height相對於設備大小。

 

10、事件對象下的相關屬性

　　pageX/Y相對於頁面。

　　clientX/Y相對於可視視口。screenX/Y相對於設備代銷。顯然，這二者用起來是同樣的，screenX/Y做用不大。

 

11、Meta viewport

　　最後咱們來討論 <meta name="viewport" content="width=320">，最初是從蘋果上起源，後來被大多瀏覽器複製。它對於佈局視口調整大小是頗有意義的。

　　想一想你建立了一個頁面可是沒給元素寬度。如今他們被拉伸到佈局視口寬度的100%,大多瀏覽器縮小來俠士全部佈局，以下所示：

　　全部用戶都將馬上放大，可是大多瀏覽器都會保持元素寬度不變，之久使得文本很難閱讀。

　　如今咱們將heml元素寬度設爲{width: 320px}，html元素縮水，其餘元素佔據320px。

　　如今咱們設置<meta name="viewport" content="width=320">，狀態就對了。

　　你能夠設置佈局寬度爲任何尺寸，包括device-width。

　　注意，viewport中的with，scale針對的是佈局視口