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
What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?
提问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
