首页 > > 网页制作 > css >

【viewport】移动设备的兼容性问题

2018-06-24 01:36:59来源：未知阅读 ()

前段时间用微信开发者工具重构一个菜单项目的时候发现在安卓设备上显示没有问题，在iphoneSE显示不全以及布局错乱的问题，找到了一个简单粗暴的解决方法。

首先，移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类，

其中ideal viewport最适合移动设备，其宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(px)，那这个元素的宽度就是设备屏幕的宽度，也就是宽度为100%的效果。

因为所有的iphone的ideal viewport宽度都是320px，所以让H5页面适应所有的iphone手机以及安卓机型的简单粗暴的方法是：设置viewport

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代表允许