html - 响应式网站在移动设备上工作但不在构建中

标签 html css reactjs

我目前正在学习 React 并尝试构建一个简单的网站。 Here it is在 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 在开发服务器上运行站点时它在电话上表现良好且 react 灵敏。但是当我运行 npm run build然后从带有 URL 和所有内容的网络服务器提供它,手机只是将它显示为缩小的桌面站点。我已经在 Android 和 iPhone 上试过了。

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

最佳答案

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

关于html - 响应式网站在移动设备上工作但不在构建中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50708273/

相关文章:

javascript - Gatsby worker 错误 :

javascript - 日期选择器 : Cannot set property 'currentDay' of undefined when multiple array id

java - Jsoup登录的html表单中没有action属性

javascript - 在 html 中显示任一下拉列表

CSS 仅在将其放入特定样式表时才应用

reactjs - 如何在无限行模式下选择 ag-grid 上的一行

html - 如何使 div 以 100% 的高度和宽度滚动?

image - Flexbox - 图像相同高度

css - 我需要编辑 scss 或 css 来设计我的 wordpress 网站吗?

reactjs - antd 如何设置今天为默认日期?