前段時間用微信開發者工具重構一個菜單項目的時候發現iphoneSE顯示不全以及佈局錯亂的問題，找到了一個簡單粗暴的解決方法。 移動設備上的viewport分為layout viewport 、 visual viewport 和 ideal viewport 三類， 其中的ideal viewpor ...
前段時間用微信開發者工具重構一個菜單項目的時候發現iphoneSE顯示不全以及佈局錯亂的問題，找到了一個簡單粗暴的解決方法。 移動設備上的viewport分為layout viewport 、 visual viewport 和 ideal viewport 三類， 其中的ideal viewport是最適合移動設備的viewport，ideal viewport的寬度等於移動設備的屏幕寬度，只要在css中把某一元素的寬度設為ideal viewport的寬度(單位用px)，那麼這個元素的寬度就是設備屏幕的寬度了，也就是寬度為100%的效果。 ideal viewport 的意義在於，無論在何種解析度的屏幕下，那些針對ideal viewport 而設計的網站，不需要用戶手動縮放，也不需要出現橫向滾動條，都可以完美的呈現給用戶。 因為所有的iphone的理想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個屬性(暫且把content中的那些東西稱為一個個屬性和值)，如下：
| width | 設置layout viewport 的寬度，為一個正整數，或字元串"width-device" |
| initial-scale | 設置頁面的初始縮放值，為一個數字，可以帶小數 |
| minimum-scale | 允許用戶的最小縮放值，為一個數字，可以帶小數 |
| maximum-scale | 允許用戶的最大縮放值，為一個數字，可以帶小數 |
| height | 設置layout viewport 的高度，這個屬性對我們並不重要，很少使用 |
| user-scalable | 是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許 |
