<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
width=device-width ：表示寬度是設備屏幕的寬度
initial-scale=1.0：表示初始的縮放比例
minimum-scale=0.5：表示最小的縮放比例
maximum-scale=2.0：表示最大的縮放比例
user-scalable=yes：表示用戶是否可以調整縮放比例
如果是想要一打開網頁，自動以原始比例顯示，並且不允許用戶修改的話，則是：
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
ps：將比例都改為1,即可。
一。分類（三種）
layout viewport ：那些為桌面設計的網站也能在移動瀏覽器上正常顯示的寬度（這是瀏覽器的一個默認值）
visual viewport ：瀏覽器可視區域的大小
ideal viewport：能完美適配移動設備的viewport。即不需要用戶縮放和橫向滾動條就能正常的查看網站的所有內容，顯示的文字的大小是合適的。
PC頁面在手機縮放原因：
1. iphon4默認的viewport 980px , user-scalable=yes
2.那么initial-scale 在320px的瀏覽器上 就是320/980 即0.33333
<meta name="viewport" content="width=device-width,meta標簽作用：讓當前viewport的寬度等於設備的寬度，同時不允許用戶手動縮放。
meta viewport 中的content有6個屬性,如下：
PS：多個屬性同時使用時用逗號隔開。
三。得到ideal viewport——>默認的 layout viewport的寬度 = 移動設備的屏幕寬度
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1">
上面兩句代碼的功能一樣，都可以可以把當前的的viewport變為 ideal viewport。
**PS：深入理解縮放 ： 縮放是相對於 ideal viewport來進行縮放的 。因此縮放值為1的時候，就得到了 ideal viewport 。
縮放值越大，當前viewport的寬度就會越小。
當前縮放值 = ideal viewport寬度 / visual viewport寬度 （安卓上的原生瀏覽器以及IE有些問題）
**PS：width 和 initial-scale=1 同時出現，且出現了沖突時，瀏覽器會取它們兩個中較大的那個值。但是事情並不都是完美的，總有個別奇葩的出現，比如uc9。在uc9瀏覽器中，當initial-scale=1時，無論width屬性的值為多少，此時viewport的寬度永遠都是ideal viewport的寬度。
總結 ： 把當前的viewport寬度設為ideal viewport的寬度，既可以設置 width=device-width，也可以設置 initial-scale=1，但這兩者各有一個小缺陷，就是iphone、ipad以及IE 會橫豎屏不分，通通以豎屏的ideal viewport寬度為准。
最完美的寫法應該是
<meta name="viewport" content="width=device-width, initial-scale=1">
initial-scale=1 解決了 iphone、ipad的毛病，width=device-width則解決了IE的毛病。
一個標准的移動web頁面 如下：
<meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">
四。有一個小小的注意點：
在iphone和ipad上，無論你給viewport設的寬的是多少，如果沒有指定默認的縮放值，則iphone和ipad會自動計算這個縮放值，以達到當前頁面不會出現橫向滾動條(或者說viewport的寬度就是屏幕的寬度)的目的。
五。動態改變meta viewport標簽（兩種辦法）
1.使用 document.write 來動態輸出 meta viewport
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')
2.通過 setAttribute 來改變
<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>
注意：在這里還是有一個奇葩的出現，安卓2.3。安卓2.3自帶瀏覽器上的一個 bug，對 meta viewport 標簽進行覆蓋或更改，會出現一個迷之結果，無法預測。
---------------------
作者：ferrysoul
來源：CSDN
原文：https://blog.csdn.net/ferrysoul/article/details/81231199
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！