移動前端分享：對於行動裝置頁面尺寸的理解(1)

移動前端分享：對於行動裝置頁面尺寸的理解(1)

為行動裝置製作前端頁面，往往會遇到很多令人迷惑的情況，本文中，我整理了一些相關的概念和方法，與大家分享一下。

裝置像素和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;