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-scale
is 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
viewport
meta 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=1
will 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