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

68 tags html5 attributes viewport meta-tags

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">
Run Code Online (Sandbox Code Playgroud)

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

Jay*_*tel 112

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

宽度=设备宽度

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

初始规模

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

最大规模

最大比例定义最大缩放.当您访问网站时,首要任务是maximum-scale=1,并且不允许用户进行缩放.

最小规模

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

用户可升级

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

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

  • `<meta name ="viewport"content ="width = 640,initial-scale = 0.7,minimum-scale = 1.0,maximum-scale = 1.0"/>`你能解释一下吗?你觉得它有效吗? (3认同)
  • 实际上,在移动浏览器中,最大比例不会禁用用户缩放。仅当您点击文本输入时,它才会禁用自动缩放。 (2认同)

xgq*_*rms 21

用户可扩展性:

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

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

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

演示代码(推荐)

<!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>
Run Code Online (Sandbox Code Playgroud)


Wun*_*orn 7

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

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