文章内容
2018/10/4 16:58:01,作 者: 黄兵
viewport的一些知识点
viewport虽然不是w3c的标准规范，但是由于iOS设备和WebKit的普遍存在，它们已成为事实上的标准。
viewprot使用多种方式控制页面在不同设备上的显示方式。
下面我们看看viewprot的一些常见属性以及需要注意的问题：
设置设备宽度
下面的代码显示了视口的宽度，这个宽度根据设备屏幕的宽度来确定：
<meta name="viewport" content="width=device-width">
以iPhone为例，如果没有它，移动版Safari会将您的页面渲染为980像素，并允许您点击缩放。使用上面的元标记，您还可以将宽度设置为特定值。例如：
<meta name="viewport" content="width=500">
应用的单位是一个CSS像素！（注意，不需要在元标记中输入'px'单位）。
<meta name="viewport" content="width=device-width"><meta name="viewport" content="width=500">设置设备高度
非常类似于具有相同语法的宽度视口元素。此元标记参数可以为水平滚动网站派上用场。老实说，我很少使用它。但是，这是一个例子：
<meta name="viewport" content="height=device-height">
与宽度一样，您可以根据需要设置特定的高度值（再次省略诸如'px'之类的单位）。
<meta name="viewport" content="height=device-height">设置初始比例
另一个常见参数是设置初始比例。这可以使页面在方向更改时正确显示。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在iOS6之前有一个错误，意味着页面会缩放方向更改，并且必须包含一个JS解决方案来修复它。Jeremy Keith 对此进行了详细介绍，Scott Jehl发布了修正案。
如今，在iOS 6+中，唯一一次在改变方向时会感到不安的是当你有一个元素集时，错误的宽度会在某个地方扩展一个不可见的框。
<meta name="viewport" content="width=device-width, initial-scale=1.0">设置最小和最大比例
也可以设置最小和最大比例。最小值可以防止用户缩放太远，最大限度可以防止用户缩放太远。这是最小比例和初始比例的示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
以下是最小值和最大值的示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">
在前面的示例中，用户无法缩小超出与内容的1：1关系，只能放大到3：1的关系。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">禁用用户缩放
想阻止人们做任何缩放吗？可以像这样写：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
就我个人而言，我并不喜欢这样，因为你要阻止用户根据需要进行缩放（例如，如果你有完美的视觉，你的漂亮的.8em字体可能会很棒）但不是每个人都这样做。
参考资料：Understanding the viewport meta tag, CSS @viewport and making an automatic link to your app
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
评论列表