html - 响应式站点在测试中在移动设备上工作，但不在构建中

Question

我目前正在学习 React 并尝试构建一个简单的网站。这是在 Codesandbox 上。

我希望网站具有响应性，并且我添加了我认为必要的 CSS 和 HTML，例如@media screen and (max-width: 600px)和<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

该站点在浏览器中按预期显示，在 Chrome 和 Firefox 上进行了测试。

我的问题是，当我在开发服务器上运行该站点时，npm start它在手机上表现良好且响应迅速。但是，当我运行npm run build然后从具有 URL 和所有内容的 Web 服务器提供它时，手机只会将其显示为缩小的桌面站点。我已经在 Android 和 iPhone 上试过了。

我已经搜索但找不到类似的问题。我将不胜感激任何帮助。

标签： htmlcssreactjs

Answer 1

事实证明，问题在于我得到我的 URL 的地方使用了一个 www-forwarder，它将我的页面包装在一个框架中。这破坏了响应能力。通过将 URL 更改为 DNS 服务，包装器被删除，我的网站按预期工作。