许多消息来源强调包括视口元标签的重要性。按照在MDN上：
狭窄的屏幕设备（例如手机）在虚拟窗口或视口上渲染页面，通常比屏幕宽，然后缩小渲染结果，以便一次看到它。然后，用户可以平移和缩放以查看页面的不同区域。例如，如果移动屏幕的宽度为640px，则可以使用980px的虚拟视口渲染页面，然后将其缩小以适合640px空间。
。
这样做是因为在一个小的视口宽度上渲染时，许多页面未进行移动优化，并且断开（或至少看起来很糟糕）。这个虚拟视口是使非移动优化站点通常在狭窄的屏幕设备上看起来更好的一种方式。
但是，这种机制对于使用媒体查询优化狭窄屏幕的页面并不是那么好 - 例如，如果虚拟视口为980px，则将永远不会使用640px或480px或更少的媒体查询，从而限制该查询，从而限制这种响应设计技术的有效性。
根据 web.dev在viewport上：
许多搜索引擎基于它们的移动友好程度对页面进行排名。没有视图元标记，移动设备在典型的桌面屏幕宽度上呈现页面，然后将页面缩小，使其难以阅读。
灯塔不检查宽度等于设备宽度。它也没有检查初始规模的键值对。但是，您仍然需要将两者都包含在移动设备上正确渲染。
因此，如果我正确理解，此标签几乎是必需的：如果不包括，则该页面将被Google惩罚，而移动浏览器将不正确地显示该页面，忽略了为其准备的媒体查询。
尽管上述内容，但根据我较早链接到的MDN页面，此标签“ 不属于任何Web标准”。
为什么是这样？
whatwg在
我们不忽略浏览器的操作，而是修复了标准以匹配浏览器的功能。
因此，鉴于浏览器利用此标签并依赖于此标签，是否与WhatWG的既定目标相一致？
也许与：
使用元视口标签的使用意味着开发人员声明其网站也应在屏幕尺寸和/或分辨率的设备上显示，其网站与典型的台式机大小和分辨率明显不同。没有IT IT移动浏览器，应该假设该页面不应在其上显示，并且可以自由应用启发式方法，以破坏开发人员对其网站应如何工作的假设（例如，他们可能会忽略媒体查询并渲染页面人为的大宽度仅在显示之前降低尺寸）。
为什么HTML规格中未包含视口元标记？有任何理由吗？
Many sources stress the importance of including the viewport meta tag. As per Using the viewport meta tag to control layout on mobile browsers on MDN:
Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.
This is done because many pages are not mobile optimized, and break (or at least look bad) when rendered at a small viewport width. This virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices.
However, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.
And as per the web.dev entry on viewport:
Many search engines rank pages based on how mobile-friendly they are. Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read.
Lighthouse doesn't check that width equals device-width. It also doesn't check for an initial-scale key-value pair. However, you still need to include both for your page to render correctly on mobile devices.
So, if I understand correctly, this tag is all but required: if not included, the page will be penalized by Google and mobile browsers will display the page incorrectly, ignoring media queries prepared especially for them.
Despite the above, according to the MDN page I linked to earlier, this tag "is not part of any web standard".
Why is that so?
WHATWG says in their FAQ:
Instead of ignoring what the browsers do, we fix the standard to match what the browsers do.
Therefore, given that browsers make use of this tag and depend on it, wouldn't it be in accordance with the stated goals of the WHATWG to standardize this tag?
Perhaps something along the lines of:
The use of the meta viewport tag means that the developer declares that their website is meant to be displayed also on devices whose screen size and/or resolution significantly differs from typical desktop sizes and resolution. Without it mobile browsers should assume that the page is not meant to be displayed on them and are free to apply heuristics that may break the developers' assumptions about how their site should work (for example, they may ignore media queries and render the page at artificially large widths only to downscale it just before displaying).
Why is the viewport meta tag not included in the HTML specs? Is there any rationale available?
发布评论
评论（2）
没有元视口标签这样的东西。
viewport是名称的设置，该设置是Meta标签的属性。＆lt; meta＆gt;是标签，而不是视口。name然后，根据标准，指示There is no such thing as a meta viewport tag.
viewportis a setting ofnamewhich is an attribute of themetatag.<meta>is the tag, not viewport.namethen, according to the standard, indicates确实，视口不是标准的元数据名称：
https：///html.spec.hatwg.org/dev/ smantics.html＃标准 - 米达塔 - 名称
据我所知， ，原因是没有人真正敦促它成为标准名称（尚未）。此外，没有压力将其作为标准名称，因为：
[下一节：其他名称]
“任何人都可以在预定义的元数据名称集上创建和使用自己的扩展名。无需注册此类扩展。”
如果是标准名称，会很好吗？当然。令人讨厌的是，这样的关键不是标准名称。
但是实际上，它是更广泛的意义上的HTML标准的一部分（元标记的其他名称）。我猜。
Indeed, viewport is not a standard metadata name:
https://html.spec.whatwg.org/dev/semantics.html#standard-metadata-names
As far as I understand, the reason is that nobody has really pressed to make it a standard name (yet). Moreover, there is no pressure to make it a standard name since:
[next section: other names]
"Anyone can create and use their own extensions to the predefined set of metadata names. There is no requirement to register such extensions."
Would it be good if it was a standard name? Of course. It is annoying that something crucial like that is not a standard name.
But actually it is part of the html standard in a broader sense (other names of meta tags). I guess.