Question

如果您要缩小浏览器窗口的宽度，它会从桌面视图更改为平板电脑视图，如果您继续操作，它将更改为移动视图。

它适用于桌面浏览器，但如果您通过移动设备查看网站，它将始终以平板电脑模式显示网页。我无法弄清楚原因。

如果您检查桌面网页并按下切换设备工具栏按钮并尝试将页面调整为移动视图，则会产生类似的效果，它会保留在平板电脑视图中。

我检查了控制台，没有显示错误，我发现它没有任何问题。任何帮助将不胜感激。

Answer 1

尝试将此添加到您的-k

<header>

Answer 2

您必须在标题标记后使用此元标记，否则响应无效

<title>This is title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Answer 3

作为背景，当苹果公司在一段时间后推出iPhone时，他们预见到当时没有人在编写专为小屏幕设计的页面的问题。这包括相对较新的媒体查询，当时仍未得到广泛支持。

他们决定将整个屏幕从较大的版本扩展到小屏幕。这不容易阅读，但至少你可以看到一切都在哪里，你可以随时放大到有趣的部分。

通过创建视口来实现缩放，这是一个屏幕外虚拟屏幕，宽度设置为960px。页面将在那里呈现，并缩放到较小的物理屏幕。

这也意味着CSS媒体查询的报告宽度为960px，因此不会触发其他样式。

Apple还引入了一个名为meta的非标准viewport属性，它使开发人员可以控制视口的属性。

viewport属性的最常见用法是将视口大小设置为与物理屏幕相同。然后，视口将报告更正确的屏幕大小，CSS Media Queries可以完成剩下的工作。实际上，viewport通常用于撤消缩放效果。

桌面浏览器从来没有遇到过这个问题，因此视口实际上只是浏览器窗口。这就是桌面总是按预期进行测试的原因，因为你看到的就是你得到的。

Answer 4

这是vuejs（可能还有其他框架）在“幕后”做的事情：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

在标头中完全设置此标签将导致您所需的结果。