视口属性如何正确使用
viewport properties how to use properly
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
由于user-scalable=no
意味着我们不允许用户放大或缩小页面。那为什么要用initial-scale=1.0
和maximum-scale=1.0
呢?有必要用吗?
您的直觉是正确的,maximum-scale=1.0
是不必要的,因为页面无论如何都无法缩放。设置 minimum-scale=1.0, maximum-scale=1.0
是一种常见模式,几乎等同于 user-scalable=no
。几乎是因为某些浏览器会以所有内容宽度可见的比例加载页面(例如 Chrome on Android 这样做)所以用户可能会以不是 1.0 的比例开始并且不能飞涨。但是,添加 initial-scale=1.0
会强制缩放到 1.0。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
由于user-scalable=no
意味着我们不允许用户放大或缩小页面。那为什么要用initial-scale=1.0
和maximum-scale=1.0
呢?有必要用吗?
您的直觉是正确的,maximum-scale=1.0
是不必要的,因为页面无论如何都无法缩放。设置 minimum-scale=1.0, maximum-scale=1.0
是一种常见模式,几乎等同于 user-scalable=no
。几乎是因为某些浏览器会以所有内容宽度可见的比例加载页面(例如 Chrome on Android 这样做)所以用户可能会以不是 1.0 的比例开始并且不能飞涨。但是,添加 initial-scale=1.0
会强制缩放到 1.0。