定义网页视口的最佳方法是什么？

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

宽度=设备宽度

\n

\n
这意味着我们告诉浏览器 \xe2\x80\x9cmy 网站适应您的设备宽度\xe2\x80\x9d
\n

\n

\n

\n
这个定义了网站的缩放比例，这个参数设置了初始缩放级别，这意味着如果1个CSS像素等于1个视口像素。当您更改方向模式或阻止默认缩放时，此参数会有所帮助。没有此参数响应式站点工作。
\n

\n

\n

\n
最大比例定义最大缩放。当你访问网站时，最高优先级是maximum-scale=1，不会\xe2\x80\x99t允许用户缩放。
\n

\n

\n

\n
最小比例定义最小缩放。这项工作与上面相同，但定义了最小规模。如果您没有定义它，那么当最大比例很大并且您想要设置可以使用的最小比例时，不使用它的工作会很有用。
\n

\n

\n

\n
用户可缩放分配1.0意味着网站允许放大或缩小。
\n
但如果您指定User-scalable=no ，则意味着网站不允许放大或缩小。
\n

\n

希望这对您有帮助！

\n

\n

请查看以下链接：

\n

\n

\n

\n