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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22777734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:27:21  来源:igfitidea点击:

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

htmlattributestagsviewportmeta-tags

提问by Jay Patel

I was going through the source code of a website and found this piece of code.

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

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

I want to know what this initial scale, user-scalable, minimum-scale, maximum-scale are and what does those values mean? And also tell me what all values they accepts.

我想知道这个初始比例、用户可缩放、最小比例、最大比例是什么以及这些值是什么意思?并告诉我他们接受的所有价值观。

回答by Jay Patel

They are viewport meta tags, and is most applicable on mobile browsers.

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

width=device-width

宽度=设备宽度

This means, we are telling to the browser “my website adapts to your device width”.

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

initial-scale

初始规模

This defines the scale of the website, This parameter sets the initial zoom level, which means 1 CSS pixelis equal to 1 viewport pixel. This parameter help when you're changing orientation, or preventing default zooming. Without this parameter, responsive site won't work.

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

maximum-scale

最大尺度

Maximum-scale defines the maximum zoom. When you access the website, top priority is maximum-scale=1, and it won't allow the user to zoom.

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

minimum-scale

最小尺度

Minimum-scale defines the minimum zoom. This works the same as above, but it defines the minimum scale. This is useful, when maximum-scaleis large, and you want to set minimum-scale.

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

user-scalable

用户可扩展

User-scalable assigned to 1.0means the website is allowing the user to zoom in or zoom out.

User-scalable 指定为1.0意味着该网站允许用户放大或缩小。

But if you assign it to user-scalable=no, it means the website is not allowing the user to zoom in or zoom out.

但是,如果您将其分配给user-scalable=no,则意味着该网站不允许用户放大或缩小。

回答by xgqfrms

user-scalable:

用户可扩展:

user-scalable=yes(default) to allow the user to zoom in or out on the web page;

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

user-scalable=noto prevent the user from zooming in or out.

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

You can get more detailed information by reading the following articles.

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

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>

回答by Wundwin Born

viewportmeta tag on mobile browser,

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

The initial-scaleproperty 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.

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

回答by Ronnie Royston

This meta tag is used by all responsive web pages, that is those that are designed to layout well across device types - phone, tablet, and desktop. The attributes do what they say. However, as MDN's Using the viewport meta tag to control layout on mobile browsersindicates,

所有响应式网页都使用此元标记,即那些旨在跨设备类型(手机、平板电脑和台式机)布局良好的网页。属性做他们所说的。但是,正如 MDN 的Using the viewport meta tag to control layout on mobile browsers指出的那样,

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

在高 dpi 屏幕上,initial-scale=1浏览器将有效地缩放页面。

I've found that the following ensures that the page displays with zero zoom by default.

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

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

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

回答by Samuel De Backer

It's for controlling aspect on mobile phones and tablets. You will find more info here : https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

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