简体繁体 English

这个标签是什么（<meta name="“viewport”" content="“width=device-width," initial-scale="1”"> ）做？

[英]What does this tag (<meta name=“viewport” content=“width=device-width, initial-scale=1”>) do?

原文 2020-06-18 11:16:21 2 1 html/ css

<meta name=“viewport” content=“width=device-width, initial-scale=1”>

My understanding of what this tag does feels a little foggy.我对这个标签的作用的理解有点模糊。 I will describe it and maybe you could amend/add to it.我会描述它，也许你可以修改/添加它。

Phones could 'lie' about what what CSS Pixel viewport dimensions is being loaded ie it might say 700px wide but it's actually 300px wide.手机可能会“撒谎”关于正在加载什么 CSS 像素视口尺寸，即它可能会说 700 像素宽，但实际上是 300 像素宽。 If a device were to do this, it could lead to the content of the.html page being loaded really small.如果设备执行此操作，可能会导致.html 页面的内容加载得非常小。 The above tag has something to do with making sure the device that's loading the.html page doesn't lie.上面的标签与确保加载.html 页面的设备没有说谎有关。

Also, I've been told intial-scale=1 sets the zoom level to 1 by default.另外，我被告知intial-scale=1默认情况下将缩放级别设置为 1。 What does this mean?这是什么意思？

1 个解决方案

Without this metatag, your sites responsiveness design will render at the devices default setting - and you don't want this as your site wont look as how you have planned it.如果没有此元标记，您的网站响应性设计将呈现在设备默认设置下 - 您不希望这样，因为您的网站看起来不像您计划的那样。 By using the metatag - the site will automatically recognize the devices viewports and scale your site accordingly.通过使用元标记 - 站点将自动识别设备视口并相应地扩展您的站点。