本文轉載於:猿2048網站➞【viewport】移動裝置的相容性問題

前段時間用微信開發者工具重構一個選單專案的時候發現在安卓裝置上顯示沒有問題，在iphoneSE顯示不全以及佈局錯亂的問題，找到了一個簡單粗暴的解決方法。   首先，移動裝置上的viewport分為 layout viewport  、  visual viewport    和   ideal viewport  三類， 其中ideal viewport最適合移動裝置，其寬度等於移動裝置的螢幕寬度，只要在css中把某一元素的寬度設為ideal viewport的寬度(px)，那這個元素的寬度就是裝置螢幕的寬度，也就是寬度為100%的效果。   因為所有的iphone的ideal viewport寬度都是320px，所以讓H5頁面適應所有的iphone手機以及安卓機型的簡單粗暴的方法是：設定viewport    <meta name="viewport" content=" width=320,maximum-scale=1.3,user-scalable=no">   meta viewport 標籤首先是由蘋果在safari瀏覽器中引入的，目的就是解決移動裝置的viewport問題。 後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支援。 在蘋果的規範中，meta viewport 有6個屬性： <

width	設定layout viewport  的寬度，為一個正整數，或字串"width-device"
initial-scale	設定頁面的初始縮放值，為一個數字，可以帶小數
minimum-scale	允許使用者的最小縮放值，為一個數字，可以帶小數
maximum-scale	允許使用者的最大縮放值，為一個數字，可以帶小數
height	設定layout viewport  的高度，這個屬性對我們並不重要，很少使用
user-scalable	是否允許使用者進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許