演示代码（推荐）

Question

我正在查看网站的源代码并找到了这段代码。

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

我想知道这个初始规模，用户可扩展性，最小规模，最大规模是什么以及这些值意味着什么？并告诉我他们接受的所有价值观。

Answer 1

它们是视口元标记，最适用于移动浏览器。

宽度=设备宽度

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

初始规模

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

最大尺度

最大比例定义最大缩放。当您访问该网站时，最高优先级为maximum-scale=1，并且不允许用户进行缩放。

最小尺度

最小比例定义最小缩放。这与上面的相同，但它定义了最小比例。如果maximum-scale很大，并且您想设置minimum-scale。

，这非常有用

用户可扩展

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

但如果您将其指定给user-scalable=no，则表示该网站不允许用户放大或缩小。

Answer 2

用户可扩展：

user-scalable = yes （默认）允许用户放大或缩小网页;

user-scalable = no ，以防止用户放大或缩小。

阅读以下文章可以获得更详细的信息。

演示代码（推荐）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
</head>
<body>
    <header>
    </header>
    <main>
        <section>
            <h1>do not using <mark>user-scalable=no</mark></h1>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>

Answer 3

移动浏览器上的

viewport元标记，

初始比例属性控制首次加载页面时的缩放级别。 最大比例，最小比例和用户可扩展属性控制用户如何放大或缩小页面。

Answer 4

所有响应式网页均使用此元标记，即那些旨在在各种设备类型（电话，平板电脑和台式机）上很好地布局的网页。属性按照他们说的去做。但是，正如MDN的Using the viewport meta tag to control layout on mobile browsers所指出的，

在高dpi的屏幕上，具有initial-scale=1的页面将被有效地被浏览器放大。

我发现以下内容可确保页面默认显示为零缩放。

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

Answer 5

这是用于控制手机和平板电脑的方面。您可以在此处找到更多信息：https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Answer 6

此帖子可能会有所帮助。 Locator Strategies提供了有关meta标签及其不同属性的完整说明。

元标记中的初始比例，用户可扩展，最小比例，最大比例属性是什么？

6 个答案:

宽度=设备宽度

初始规模

最大尺度

最小尺度

用户可扩展

演示代码（推荐）