自适应网页设计在台式机上运行，​​但不在移动设备上运行

Question

我有一个网站，必须对手机有所响应。我已经在桌面上创建了它。当我调整浏览器窗口时，它可以完美地在手机上运行，但是当我在真正的手机上检查它时：Samsung Galaxy S2，它无法响应手机视图。有什么问题吗？

Answer 1

您可能在html头中缺少视口元标记：

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

没有它，设备将假定视口并将其设置为全尺寸。

Answer 2

我也遇到了这个问题。终于我找到了解决方案。使用此波纹管代码。希望：问题会得到解决。

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Answer 3

虽然上面已经回答了并且使用起来是正确的

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

但是，如果您使用的是React和webpack，请不要忘记关闭element标签

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