1，在網頁的<head>中增加一個meta標簽：
<meta 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 name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no” />
這些屬性可以同時使用，也可以單獨使用或混合使用，多個屬性同時使用時用逗號隔開就行了。
ideal viewport：即為手機屏幕大小。也就是內容大小和屏幕大小剛好一樣。
1.1，補充：width=device-width：
通過width=device-width，所有瀏覽器都能把當前的viewport寬度變成ideal viewport的寬度， 但要注意的是，
在iphone和ipad上，無論是豎屏還是橫屏，寬度都是豎屏時ideal viewport的寬度。
1.2，補充：initial-scale=1：
initial-scale用於指定頁面的初始縮放比例，縮放是相對於 ideal viewport來進行縮放的， 因此當initial-scale=1時，表示將layout viewport的寬度設置為 ideal viewport的寬度。
<meta name="viewport" content="initial-scale=1" /> 可以知道initial-scale=1 也能把當前的viewport寬度變成 ideal viewport 的寬度， 但這次輪到了windows phone 上的IE 無論是豎屏還是橫屏都把寬度設為豎屏時ideal viewport的寬度。
總結1.1和1.2：
要把當前的viewport寬度設為ideal viewport的寬度， 既可以設置 width=device-width，也可以設置 initial-scale=1，
但這兩者各有一個小缺陷，就是iphone、ipad以及IE 會橫豎屏不分，通通以豎屏的ideal viewport寬度為准。 所以，最完美的寫法應該是，兩者都寫上去，
這樣就
initial-scale=1 解決了 iphone、ipad的毛病，
width=device-width則解決了IE的毛病。 <meta name="viewport" content="width=device-width,initial-scale=1">
1.3，width 和 initial-scale=1同時出現，並且還出現了沖突呢
當遇到這種情況時，瀏覽器會取它們兩個中較大的那個值。 例如，當width=400，ideal viewport的寬度為320時，取的是400； 當width=400， ideal viewport的寬度為480時，取的是ideal viewport的寬度。
1.4，關於minimum-scale=1, maximum-scale=1，user-scalable=no
下面兩者一樣： <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 或者 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 可以看到第二段代碼我們把minimum-scale=1, maximum-scale=1這兩個屬性去掉了，但效果是一樣的， 因為添加了user-scalable=no 那么，minimum-scale=1, maximum-scale=1這兩個屬性就沒必要追加了。 因為你都已經禁止了用戶縮放頁面了，允許的縮放范圍也就不存在了。
總結：
1，所有的scale指令都是相對於ideal viewport的。
無視layout viewport設置了多少，所以maximum-scale=3意味着最大的縮放值是ideal viewport的300%
2，layout viewport能被設置成ideal viewport。width=device-width和initial-scale=1指令可以做到。
3，針對某個設備的ideal viewport而做出的網站，在其他設備上的表現也不會相差非常多甚至是表現一樣的，
這是因為市場上雖然有不同分辨率，不同型號的手機，但是他們的ideal viewport是十分接近的。
4，ideal viewport會隨設備轉向而改變。如Iphone 5s 尺寸為320*568。在豎屏模式下寬度為320px，而在橫屏模式下寬度為568px。
資料：
2，視口（viewport）
ps:內容顯示的大小。
手機默認的layout-viewport是多大呢，“layout viewport有多寬？
每個瀏覽器都不一樣，
Safari iPhone為980px， Opera為850px， Android WebKit為800px， IE為974px。”
viewport指視口，瀏覽器上(或一個app中的webview)顯示網頁的區域。
在默認情況下，移動設備上的viewport都是大於瀏覽器可視區域的，
這是因為移動設備的分辨率相對於PC來說都比較小，
所以為了能在移動設備上正常顯示那些為PC瀏覽器設計的網站，
移動設備上的瀏覽器都會把自己默認的viewport設為980px或1024px（也可能是其它值，由設備本身決定），
但后果是瀏覽器出現橫向滾動條，因為瀏覽器可視區域的寬度比默認的viewport的寬度小。
PC端的視口是瀏覽器窗口區域，
而移動端的則存在三個不同的視口：
layout viewport：布局視口（ps:移動瀏覽器顯示內容的區域大小）
visual viewport：視覺視口（ps:屏幕區域的大小，布局視口大於視覺視口就會出現滾動條）
ideal viewport：理想視口（ps:內容區域完全契合設備窗口大小）
layout viewport 布局視口
在PC端的網頁的layout viewport即瀏覽器頁面顯示的整個區域， 也可以理解成網頁的繪制區域。 而在移動端由於其屏幕較小，無法全部顯示PC端頁面的全部內容， 所以默認情況下(不用<meta name="viewport">去控制)， 移動端會指定一個大於其瀏覽器顯示區域layout viewport，一般是980px
layout viewport的寬度可以通過 document.documentElement.clientWidth來獲取。
visual viewport 視覺視口
visual viewport，顧名思義指瀏覽器可視區域，即我們在移動端設備上看到的區域。
網頁的實際繪制區域視口大小layout viewport比我們在手機上可以看到的大小要大，所以我們手機端視覺視口會出現橫向滾動條。
visual viewport的寬度可以通過 document.documentElement.innerWidth來獲取。
ideal viewport 理想視口（ps:布局視圖和視覺視口的平衡）
所謂理想視口，即頁面繪制區域可以完美適配設備寬度的視口大小，
不需要出現滾動條即可正常查看網站的所有內容，且文字圖片清晰，
如所有iphone的理想視口寬度都為320px，
安卓設備的理想視口有320px、360px等等。
3，視口的控制
手機默認的layout-viewport是多大呢，“layout viewport有多寬？每個瀏覽器都不一樣，Safari iPhone為980px，Opera為850px，Android WebKit為800px，最后IE為974px。”
雖然viewport解決了我們的一些問題,但是它也為我們帶來了一些遺留問題.
那就是對於那些專門針對手機設計的頁面,我們如果不設置viewport的大小的話,那么會使得我們的網頁內容整體縮小了
作者：小貔
鏈接：https://www.jianshu.com/p/f3cb6c1a49dd
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。