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

Question

我有一个必须对手机做出响应的网站。我用我的桌面创建了它。当我调整浏览器窗口时，它可以很好地用于手机，但是当我在真正的手机上查看它时：三星Galaxy S2它对移动视图没有响应。

可能有什么不对？

Answer 1

你可能错过了html head中的viewport元标记：

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

如果没有它，设备会假定并将视口设置为完整大小。

更多信息here。

Answer 2

我也遇到过这个问题。最后我得到了解决方案。 使用此波纹管代码。希望：问题将得到解决。

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

Answer 3

检查您的CSS或使用CSS Validator。

    Parse Error

   .navbar .nav li a {
    padding-right: 5px;
    paddng-left: 5px;

看起来您还没有关闭大括号或拼写错误。

Answer 4

尽管上面已经回答了，但使用起来是正确的

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

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

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