<meta name="viewport" content="width=device-width,initial-scale=1.0">
不允许用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度ideal viewport。因为meta viewport中
的width能控制layout viewport的宽度,所以我们只需要把width设为width-device这个特殊的值就行了。
<meta name="viewport" content="width=device-width">
可以看到通过width=device-width,所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度,但要注意的是,在
iphone和ipad上,无论是竖屏还是横屏,宽度都是竖屏时ideal viewport的宽度。
这句代码也能达到和前一句代码一样的效果,也可以把当前的的viewport变为 ideal viewport。
<meta name="viewport" content="initial-scale=1">
这句代码的作用只是不对当前的页面进行缩放,也就是页面本该是多大就是多大。
那为什么会有 width=device-width 的效果呢?
首先你得弄明白这个缩放是相对于什么来缩放的,因为这里的缩放值是1,也就是没缩放,但却达到了 ideal viewport 的效
果,所以,那答案就只有一个了,缩放是相对于 ideal viewport来进行缩放的,当对ideal viewport进行100%的缩放,也就是
缩放值为1的时候,不就得到了 ideal viewport吗?
测试结果表明 initial-scale=1 也能把当前的viewport宽度变成 ideal viewport 的宽度,但这次轮到了windows phone 上的IE
无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。
总结一下,要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,但
这两者各有一个小缺陷,就是iphone、ipad以及IE 会横竖屏不分,通通以竖屏的ideal viewport宽度为准。所以,最完美的写法应
该是,两者都写上去,这样就 initial-scale=1 解决了 iphone、ipad的毛病,width=device-width则解决了IE的毛病: