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

问题描述 投票：63回答：5

我正在浏览一个网站的源代码并找到了这段代码。

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

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

html5 attributes tags viewport meta-tags
5个回答
101
投票

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

宽度=设备宽度

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

初始规模

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

最大规模

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

最小规模

最小比例定义最小缩放。这与上面的相同，但它定义了最小比例。这很有用，当maximum-scale很大，你想设置minimum-scale。

用户可升级

用户可扩展分配给1.0意味着网站允许用户放大或缩小。

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

18
投票

用户可扩展性：

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

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

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

Demo Code (recommended)

<!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>
7
投票

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

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

1
投票

所有响应式网页都使用此元标记，即那些旨在跨设备类型（手机，平板电脑和桌面）进行布局的网页。这些属性符合他们的意思。但是，正如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">

0
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.