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

2022-01-13 00:00:00 attributes tags html meta-tags viewport

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

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.

推荐答案

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

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

这意味着,我们告诉浏览器我的网站适应您的设备宽度".

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

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

This defines the scale of the website, This parameter sets the initial zoom level, which means 1 CSS pixel is 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.

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

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.

Minimum-scale 定义最小缩放.这与上面的工作方式相同,但它定义了最小比例.这很有用,当 maximum-scale 很大,并且您想设置 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.

用户可缩放分配给 1.0 表示网站允许用户放大或缩小.

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

但是如果你把它分配给user-scalable=no,这意味着网站不允许用户放大或缩小.

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

相关文章