React - 视口被忽略

Question

在我的索引文件中，我有以下内容：

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

我使用React加载页面，但主索引文件是HTML文件。 （.pug）

这已正确插入DOM。但是，视口会被忽略 - 我的页面显示的是桌面版本。

如果我在Chrome开发工具中编辑DOM，例如。将1更改为1.0或元标记的任何其他部分，它会使页面正确地重新计算视口，然后将立即正确显示。有什么想法吗？

您可能需要点击图片才能看到GIF动画。

Answer 1

尝试在index.pug文件中使用meta(name='viewport', content='width=device-width, initial-scale=1.0')。

根据您的代码，尝试使用meta(name='viewport', content='width=device-width, initial-scale=1.0, maximum-scale=1.0')

Answer 2

好吧，您可以在页面加载时手动尝试triggering the viewport recalculation，例如：

window.getComputedStyle(document.body)

_{请注意，这不是最佳解决方案。它应该在（或仅在）找不到根本原因时使用。}