viewport的meta标签

我们都是知道用户是可以对页面进行页面缩放的。但是pc端的用户缩放和移动端的缩放浏览器是有差异的。

pc端：用户缩放影响的布局视口的尺寸，会影响布局。
移动端：用户缩放影响的视觉视口的尺寸。（页面布局不会乱）

initial-scale

初始化缩放，也叫系统缩放。
系统缩放是参照与理想视口（独立设备像素）进行缩放，同时控制布局视口和视觉视口。
当设置initial-scale=1时，等同于width=device-width；

太大的元素

移动端大多数浏览器厂商的视觉视口要尽量包住页面内容。当页面内容的宽度大于布局视口的宽度时，超出布局视口宽度的内容也会呈现出来。

完美视口

当viewport的meta标签中同时有width=devic-width和initial-scale=1.0，这个时候就是完美视口

<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

完美视口不仅解决旋转时的问题。如果页面中存在太大的元素，大部份浏览器都不会改变布局视口了。

width=devic-width和initial-scale=1.0谁说了算？

这两个值都是用来设置布局视口=设备独立像素；当两者设置的布局视口大小不一样时，就会有冲突。
当他们设置的布局视口不一样时，谁设置的布局视口大，就听谁的。

<meta name=“viewport”>完整版

这个标签是苹果发明的，桌面浏览器不支持。
完整代码：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

为什么必须这么写？

width：直接设置数值大部分的安卓手机是不支持，但是ios支持。
	   同时设置该值时，ie10的用户旋转时就会正常。
initial-scale：控制初始缩放比例；同时当用户旋转设备时，布局视口的宽度会发生改变。
			（没有这个值，用户旋转时，不会改变布局时视口）
user-scalable：是否允许缩放（no||yes），默认允许。
			   该属性值ios10以下不支持，其他都支持；
minnimum-scale：允许用户缩放的最小比例（用来禁止ios10以下的用户缩放行为）
maxinum-scale：允许用户缩放的最大比例（用来禁止ios10以下的用户缩放行为）

更多有关移动开发资料请参考荷兰前端大神Peter-Paul Koch的《移动Web手册》