反应 - 视口被忽略答案

【问题标题】：React - Viewport being ignored反应 - 视口被忽略
【发布时间】：2022-02-03 13:46:40
【问题描述】：

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

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

我正在使用 React 加载页面，但主索引文件是 HTML 文件。 (.pug)

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

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

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

【问题讨论】：

【解决方案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')

【讨论】：

【解决方案2】：

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

window.getComputedStyle(document.body)

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

【讨论】：

【解决方案3】：

尝试使用它。它对我有用。

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

【讨论】：