viewport的理解和使用

這是我參與8月更文挑戰的第7天，活動詳情查看：8月更文挑戰

viewport概念

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

css中的像素和設備像素的區別

在桌面網頁開發時，css中的1px就是設備上的1px；然而css中的1px僅僅是一個抽象的值，不表明實際像素爲多少；而在移動設備中，不一樣設備的像素密度是不同的，css中的1px可能並不等於真實設備的一個像素值。用戶縮放也會改變css中的1px表明多少設備像素。這個比例就是devicePixelRatio

物理像素/獨立像素 = devicePixelRatio
複製代碼

咱們能夠在瀏覽器中進行縮放，在控制檯中打印window.devicePixelRatio來查看devicePixelRatio的大小。其中的獨立像素能夠理解爲css中的px。

視口基礎

一個典型的針對移動端優化的站點包含相似下面的內容：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
複製代碼

如下爲viewport的幾個屬性，這些屬性能夠混合來使用，多個屬性同時使用要用逗號隔開。這裏咱們展開一個概念，叫作ideal viewport，指的是理想狀況下的viewport，不須要用戶縮放和橫向滾動條就能正常查看網頁的全部內容，而且可以看清全部文字，不管這個文字在css中定義爲多小，顯示出來時能夠看清的。

屬性	描述
width	控制視口的寬度，能夠指定數字；或設置device-width來指定
height	控制視口的高度，這個屬性不過重要，不多使用
initial-scale	控制頁面最初加載時的在在idealviewport下縮放等級，一般設爲1，能夠是小數
maximum-scale	容許用戶的最大縮放值，爲一個數字，能夠帶小數
minimum-scale	容許用戶的最小縮放值，爲一個數字，能夠帶小數
user-scalable	是否容許用戶進行縮放，值爲"no"或"yes", no 表明不容許，yes表明容許

viewport進階

1.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">
複製代碼

2.動態改變屬性

a. document.write()

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')
複製代碼

b.setAttribute

var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
複製代碼

參考資料

1. MDN -- 在移動瀏覽器中使用viewport元標籤控制佈局
2. 移動前端開發之viewport的深刻理解