<meta name="viewport" content="width=device-width,initial-scale=1.0">
content属性值:
width:可视区域的宽度,值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放,no 禁止缩放
name="viewport":
在做移动端设备开发的时候,一定要先明白移动设备的viewport,这也是浏览器的视口,不同的设备浏览器设备viewport是不一致的,下面是一般设备的浏览器viewport。
随着移动设备的像素越来越高,但是设备的屏幕并没有相应的大小特别的改变,所以我们移动设备的像素中的px并不是一定等于我们css中的px,而且当用户缩放的时候也会引起像素的相应变化, ppk大神对于移动设备上的viewport有着非常多的研究(第一篇,第二篇,第三篇)ppk把这个浏览器默认的viewport叫做 layout viewport。这个layout viewport的宽度可以通过document.documentElement.clientWidth 来获取。
然而,layout viewport 的宽度是大于浏览器可视区域的宽度的,所以我们还需要一个viewport来代表 浏览器可视区域的大小,ppk把这个viewport叫做 visual viewport。visual viewport的宽度可以通过window.innerWidth 来获取,但在Android 2, Oprea mini 和 UC 8中无法正确获取。
ideal viewport 移动设备的理想viewport,怎么获取这个ideal viewport 呢?
我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
此外,在安卓中还支持 target-densitydpi 这个私有属性,它表示目标设备的密度等级,作用是决定css中的1px代表多少物理像素,值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个。因为这个属性只有安卓支持,并且安卓已经决定要废弃target-densitydpi 这个属性了,所以这个属性我们要避免进行使用 。
把当前的viewport宽度设置为 ideal viewport 的宽度
要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度,所以我们只需要把width设为width-device这个特殊的值就行了。
两种方法使移动设备宽度变为理想宽度:
<meta name="viewport" content="initial-scale=1">经过测试这一个比较好一点只有IE不行
<meta name="viewport" content="width=device-width"> iPhone和iPad不行
<meta name="viewport" content="width=device-width, initial-scale=1">最完美的写法