关于html5：什么是元标记中的初始缩放，用户可缩放，最小缩放，最大缩放属性？


What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?

我浏览了一个网站的源代码，发现了这段代码。

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

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

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

宽度=设备宽度

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

初始规模

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

最大规模

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

最小尺度

最小比例定义最小缩放。这与上面的工作原理相同，但是它定义了最小比例。当maximum-scale很大并且您要设置minimum-scale时，此功能很有用。

用户可扩展

分配给1.0的"用户可缩放"表示网站允许用户放大或缩小。

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

相关讨论

用户可扩展：

user-scalable = yes(默认)，允许用户放大或缩小网页；

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

您可以通过阅读以下文章获得更多详细信息。

  • http://www.html-5.com/metatags/meta-viewport.html

  • https://css-tricks.com/snippets/html/response-meta-tag/

  • https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#Attributes
    enter image description here

演示代码(推荐)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>
            do not using <mark>user-scalable=no</mark>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>

相关讨论

移动浏览器上的viewport元标记，

The initial-scale property controls the zoom level when the page is first loaded.
The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

所有响应式网页均使用此meta标签，即那些旨在在各种设备类型(电话，平板电脑和台式机)上良好布局的网页。属性按照他们说的去做。但是，正如MDN的"使用视口元标记来控制移动浏览器上的布局"所示，

On high dpi screens, pages with initial-scale=1 will effectively be
zoomed by browsers.

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

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