响应式网页设计适用于桌面，但不适用于移动设备答案

【问题标题】：Responsive web design is working on desktop but not on mobile device响应式网页设计适用于桌面，但不适用于移动设备
【发布时间】：2013-01-13 14:35:57
【问题描述】：

我有一个必须响应手机的网站。我已经使用我的桌面创建了它。当我调整浏览器窗口时，它在手机上运行良好，但是当我在我的真实手机上检查时：三星 Galaxy S2 它对移动视图没有响应。

可能出了什么问题？

【问题讨论】：

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

【讨论】：