移動端瀏覽器通常都在一個比屏幕更寬的虛擬窗口中渲染頁面，這個虛擬窗口就是viewport，目的是正常展示沒有做移動端適配的網頁，可以讓他們完整的展現給用戶。我們有時用移動設備訪問桌面版網頁就會看到一個橫向滾動條，這裡可顯示區域的寬度就是viewport的寬度。
常規使用，頁面可以縮放就用下面的代碼
<meta name=viewport content=width=device-width, initial-scale=1 />
如果不想頁面縮放就用下面的代碼
二.css中的像素和設備像素的區別<meta name=viewport content=width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no>
在桌面網頁開發時，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代表允許 |
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
viewport概念var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
移動端瀏覽器通常都在一個比屏幕更寬的虛擬窗口中渲染頁面，這個虛擬窗口就是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代表允許 |
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');
好了，這篇文章就介紹到這了大家可以根據自己測需要要選擇。一般來說pc與移動不帶自適應的就可以用不支持縮放的，如果跳轉到移動端的可以縮放也沒有影響。