移動端之viewprot淺析

寫在前面：

在之前的文章中，我簡述了設備像素比(devicePixelRatio)的概念以及如何得出某設備的設備像素比，那麼在本文中我將對viewport進行簡單的分析，希望能夠使大家對移動端頁面重構有更深入的理解。

－－－－－正 文 分 割 線－－－－－

一.viewport 概念

手機瀏覽器是把頁面放在一個虛擬的「窗口」（viewport）中，窗口可大於或小於手機的可視區域。這樣不會破壞沒有針對移動設備優化的網頁的布局，用戶可以通過平移和縮放來看網頁的其他部分。

一般移動設備上的 viewport 都要大於其可視區域，大部分移動設備默認的 viewport 為980px。

二.viewport 設置

我們在進行移動端頁面重構時，經常會加上如下一句代碼：

這句代碼的作用是使移動設備的 viewport 設置為該設備的寬度，同時初始縮放值為 1 最大縮放值為1，並且不允許用戶進行縮放。

我們來看一下viewport中的屬性：

viewport 屬性與值

當我們把 viewport 中的 width 設置為 width-device 時，viewport 的寬度等於移動設備的屏幕寬度，而如果設置 initial-scale 為 1 也會得到相同結果。一般來講我們會同時設置這兩個屬性，當這兩個屬性因為值不同而產生不同的效果時，瀏覽器則會取得兩者中較大的值。

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！