响应式网页设计适用于桌面，但不适用于移动设备
Posted
技术标签:
【中文标题】响应式网页设计适用于桌面，但不适用于移动设备【英文标题】：Responsive web design is working on desktop but not on mobile device 【发布时间】：2013-01-13 14:35:57 【问题描述】：我有一个必须响应手机的网站。我已经使用我的桌面创建了它。当我调整浏览器窗口时，它在手机上运行良好，但是当我在我的真实手机上检查时：三星 Galaxy S2 它对移动视图没有响应。
可能出了什么问题？
【问题讨论】：
您将不得不添加更多信息和代码以便任何人提供帮助。您的 CSS、html 等。您正在使用什么框架（例如 Twitter Bootstrap），如果有的话，等等。 【参考方案1】：您可能缺少 html 头部中的 viewport 元标记：
<meta name="viewport" content="width=device-width, initial-scale=1">
没有它，设备会假定并将视口设置为全尺寸。
更多信息here。
【讨论】：
在浏览器上不用这条线也可以，但在手机上只需要这条线。 确保生产index.html实际上包含标签以及开发index.html
@FilipHalas 就是这样。我的生产 index.html 在 iframe 中呈现我的实际 index.html。并且生产的 index.html 没有元标记。在那里添加它修复了它。
我已经做了好几年的 web 并且总是自动执行此操作，今天我忘记放置标签并且无法弄清楚为什么我的 web 没有显示响应式查询que 屏幕尺寸和 1 次快速搜索我在这里得到了答案，哈哈哈感觉这件事太愚蠢了。
我已添加此行，但移动视图没有响应【参考方案2】：
我也遇到过这个问题。最后我得到了解决方案。 使用下面的代码。希望：问题会解决的。
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
【讨论】：
【参考方案3】：虽然上面已经回答了，但使用是对的
<meta name="viewport" content="width=device-width, initial-scale=1">
但是如果你使用的是 React 和 webpack，那么不要忘记关闭元素标签
<meta name="viewport" content="width=device-width, initial-scale=1" />
【讨论】：
【参考方案4】：响应式元标记
为确保所有设备的正确渲染和触摸缩放，请将响应式视口元标记添加到您的<head>。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
【讨论】：
以上是关于响应式网页设计适用于桌面，但不适用于移动设备的主要内容，如果未能解决你的问题，请参考以下文章
Socket.io 适用于桌面 safari 和 chrome，但不适用于移动设备
React Web App Routing 适用于桌面（包括移动开发视图），但不适用于移动浏览器
Jquery mobile getJSON 适用于浏览器但不适用于移动设备