viewport的相關知識點

主要說一些viewport的基本原理以及使用

㈠概念

手機瀏覽器是把頁面放在一個虛擬的「窗口」（viewport）中，一般這個虛擬的「窗口」（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其餘手機瀏覽器也基本支持。

移動端瀏覽器一般都在一個比屏幕更寬的虛擬窗口中渲染頁面，這個虛擬窗口就是viewport，目的是正常展現沒有作移動端適配的網頁，可讓他們完整的展示給用戶。咱們有時用移動設備訪問桌面版網頁就會看到一個橫向滾動條，這裏可顯示區域的寬度就是viewport的寬度。

 

㈡利用meta標籤對viewport進行控制

咱們常常會見到這樣一行代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

該meta標籤的做用是讓當前viewport的寬度等於設備的寬度，同時不容許用戶手動縮放。

 

 如下爲viewport的幾個屬性，這些屬性能夠混合來使用，多個屬性同時使用要用逗號隔開

 

㈢width和initial-scale

當設置了width和initial-scale時，瀏覽器會自動選擇數值最大的進行適配。

如設置：

 <meta name="viewport" content="width=400, initial-scale=1">

瀏覽器會選擇數值大的進行適配，若是當前窗口ideal viewport寬度爲300，initial-scale值爲1，取得是width爲400的值；若是當前窗口的ideal viewport爲480，則取480。

事實上，width=device-width和initial-scale=1都表明應用ideal viewport，但在ipad、iphone等移動設備和IE上，橫豎屏不分，默認都取豎屏的寬度，兼容性最好的寫法就是<meta name="viewport" content="width=device-width, initial-scale=1">

 

總結：在iphone和ipad上，不管你給viewport設的寬的是多少，若是沒有指定默認的縮放值，則iphone和ipad會自動計算這個縮放值，以達到當前頁面不會出現橫向滾動條(或者說viewport的寬度就是屏幕的寬度)的目的。

 

但願有所幫助。