logo标签列表

meta标签中的initial-scale、user-scalable、minimum-scale和maximum-scale属性是什么？

htmlattributestagsviewportmeta-tags
91

我正在查看一个网站的源代码，发现了这段代码。

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

我想知道initial-scale，user-scalable，minimum-scale和maximum-scale这些是什么意思，以及它们的值代表什么？还请告诉我它们可以接受哪些值。

7个回答
149

这些是视口元标记，在移动浏览器上应用最广泛。

width=device-width

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

initial-scale

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

maximum-scale

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

minimum-scale

minimum-scale定义了最小缩放级别。其作用与上述相同，但是它定义了最小缩放级别。当maximum-scale很大且您想设置minimum-scale时，这将非常有用。

user-scalable

User-scalable被分配为1.0，表示该网站允许用户缩放。

但如果您将其分配为user-scalable = no，则意味着该网站不允许用户缩放。

4
<meta name="viewport" content="width= 640,initial-scale=0.7,minimum-scale=1.0,maximum-scale=1.0" /> 这行代码是网页的元数据之一，用于指定视口（viewport）的属性。其中 width 属性设置视口的宽度为 640 像素，initial-scale 属性设置初始缩放比例为 0.7，而 minimum-scale 和 maximum-scale 属性则将最小和最大缩放比例都设置为 1.0，即不允许用户对页面进行缩放。这段代码是有效的，并且常用于移动设备上的响应式设计。 - Durai Amuthan.H
1
“视口像素”和“设备像素”是相同的吗？ - overexchange
1
用户可缩放应该是 1.0 或 yes 吗？ - Kazim Zaidi
@overexchange 不。 - TylerH
5
在移动Safari上，maximum-scale并不能禁用用户缩放功能。它只会禁用自动缩放，比如在你点击文本输入框时的缩放。 - Curtis
21

user-scalable:

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>

<h1>不要使用<mark>user-scalable=no</mark></h1> - xgqfrms
谢谢，终于有人提供了适当解释最小/最大比例尺是做什么的。 - Julio Feferman
7

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

initial-scale属性控制页面在加载时的缩放级别。 maximum-scale、minimum-scale和user-scalable属性控制了用户缩放页面的限制。

3
这个meta标签用于所有响应式网页，即那些旨在跨设备类型（手机、平板电脑和桌面）进行良好布局的网页。属性执行其所述功能。然而，正如MDN的使用viewport meta标签控制移动浏览器布局所指出的那样，在高dpi屏幕上，具有“initial-scale = 1”的页面将被浏览器有效地缩放。我发现以下内容可以确保页面默认情况下以零缩放显示：<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
谢谢@Ronnie。对我有用，但我将其从0.86更改为0.98。 - Deep
0
0
0
如果您担心在可访问性选项卡下出现Google Pagespeed（Lighthouse）错误。您可以通过在主题文件中的header.php文件中替换此代码来解决该错误。
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">

应该被替换为

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

您会发现在刷新Pagespeed页面后，错误将被解决。如果您在替换代码后仍然寻找错误，只需清除优化插件或主机端的缓存即可。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接