【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表明容許