页面适配移动端配置meta（转载）

 <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的毛病：

原文地址：https://blog.youkuaiyun.com/u012402190/article/details/70172371