Question

我习惯于查看我访问的许多网站的代码，并且已经看到了以多种不同方式定义的视口。

我见过这个

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

和这个

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

和这个

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

和这个

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

我想把所有这些组合成这样的东西

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

但这有什么好处吗？什么是最好的方式？

Answer 1

宽度=设备宽度

这意味着我们告诉浏览器“我的网站适应您的设备宽度”

初始规模

此定义缩放网站，此参数设置初始缩放级别，这意味着 1 CSS像素等于 1视口像素。此参数有助于更改方向模式或防止默认缩放。没有这个参数响应站点工作。

最大比例定义最大缩放。当您访问网站时，top-scale = 1将不允许用户进行缩放。

最小比例定义最小缩放。这项工作与上述相同，但定义了最小规模。如果你没有定义它的工作而不使用它，当最大比例很大并且你想设置你可以使用的最小比例时，它是有用的。

用户可扩展分配 1.0 表示网站允许放大或缩小。

但如果您指定用户可扩展=否，则表示网站不允许放大或缩小。

希望这对你有帮助！

请查看以下链接：