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

我正在浏览一个网站的源代码,并find这段代码。

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

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

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

宽度=设备宽度

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

初始规模

这个定义了网站的规模,这个参数设置了初始的缩放级别,这意味着1个CSS像素等于1个视口像素 。 此参数有助于您更改方向或防止默认缩放。 没有这个参数,响应式网站将无法正常工作。

最大规模

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

最小规模

最小比例尺定义了最小缩放比例。 这和上面的一样,但它定义了最小的尺度。 当maximum-scale很大时,这是有用的,并且您想设置minimum-scale

用户可升级

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

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

用户可扩展性:

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

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

您可以通过阅读以下文章获取更多详细信息,希望对您有所帮助!

http://www.html-5.com/metatags/meta-viewport.html

https://css-tricks.com/snippets/html/responsive-meta-tag/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes 在这里输入图像描述

演示代码(推荐)

 <!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> 

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

初始缩放属性控制首次加载页面时的缩放级别。 最大规模最小规模和用户可扩展属性控制着用户如何放大或缩小页面的方式。

这是为了控制手机和平板电脑的方面。 你会在这里find更多的信息: https : //developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

以下是视口元数据标签属性

宽度:设备虚拟视口的宽度。 设备宽度:设备屏幕的物理宽度。 高度:设备“虚拟视口”的高度。 设备高度:设备屏幕的物理高度。 初始缩放比例:访问页面时的初始缩放比例。 1.0不缩放。 最小比例:访客可以放大页面的最小数量。 1.0不缩放。 最大比例:访问者可以放大页面的最大数量。 1.0不缩放。 用户可扩展:允许设备放大和缩小。 值是或不是。