梳理 移動端Viewport的知識

————　　再次閱讀了《viewports剖析》，寫一點自己對移動端的總結和想法。

之前一直在這兩個知識點上學習，但我認為弄懂移動端，還需要加上乙個關鍵知識點，就是 —— 螢幕大小。下面簡單地總結一下。

layout viewport （布局視口）

在pc端已經知道，網頁的viewport是高於html元素的屬於頁面最高端別的容器。這個尺寸就是頁面布局的寬度（高度）。

我們根據視覺稿布局網頁的時候，所做的頁面就是基於此容器。

----------------在說visual viewport之前，先來總結一下螢幕大小。

螢幕大小

雖然在前端開發中並不關心螢幕大小，因為移動裝置太多，解析度，尺寸，比例也不盡相同。往往會用一套適配進行開發，但有必要了解。

eg. 以iphone6舉例：

解析度（基於dip）：750*1334 （寬*高）

以上尺寸獲得的螢幕大小：375*667 ，這就是我們獲得的裝置螢幕寬度。

螢幕是retina屏，dpr=2

dpr（device pixel ratio），物理畫素與裝置畫素比例。dpr=2，即 1 個裝置畫素= 2*2 個物理畫素

visual viewport（視覺視口）

visual viewport虛擬視口可以當做是閱讀layout viewport的視窗。可以用以上js**來獲得其尺寸，注意，尺寸是會隨著使用者或**控制縮放而變化的！

pc端通過這個**獲得瀏覽器寬度（高度），其值也是會通過縮放而變化，當然在pc端也可以通過使用者人為改變瀏覽器大小。

之前一直在這個縮放地方做困擾，其實縮放改變的是視覺視口的大小（即視口的寬與高）。而縮放又是基於螢幕大小的。

這麼說也難以理解，其實（拿寬度舉例）是以 "screen.width除以window.innerwidth" ，如下：

eg，當縮放值為2的時候，在iphone6，裝置畫素為 375*667 大小的螢幕中，只顯示了 188*334 個css畫素點（visual viewport）。那麼在這個螢幕中可以顯示的元素變少，給使用者的感覺就是「放大」了，使用者拿了乙個2倍的「放大鏡」，去「看」這個layout viewport。

...

...

(乙個meta擴充套件標籤，現在已經來做前端的螢幕適配)

width：定義了layout viewport的寬度

device-width：裝置寬度

initial-scale：設定預設初始值，以多少大小的visual viewport去「看」layout viewport

還有maximum-scale，minimum-scale等~~~

移動端viewport講解

viewport描述 也就是可視區域。對於桌面瀏覽器，我們都很清楚viewport是什麼，就是除去了所有工具欄 狀態列 滾動條等等之後用於 看網頁的區域，這是真正有效的區域。由於移動裝置螢幕寬度不同於傳統web,因此我們需要改變viewport 這是真正有效的 區域。由於移動裝置螢幕寬度不同於傳統w...

移動端viewport解惑

再配合 查詢 media就可以寫出適配各種手機端的頁面了。但是，為什麼就能夠了呢？網上查了很多資料，反覆看了很多遍還是似懂非，知道看了知乎中乙個問題的解答，茅塞頓開。自己不明白三個點，其中viewport，width，device width分別代表什麼？viewport瀏覽器的視窗，顯示網頁內容的...

移動端viewport的作用

我們知道，在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個畫素往往都是對應著電腦螢幕的1個物理畫素，這可能會造成我們的乙個錯覺，那就是css中的畫素就是裝置的物理畫素。但實際情況卻並非如此，css中的畫素只是乙個抽象的單位，在不同的裝置或不同的環境中，css中的1px所代表的裝置物理畫...