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

Question

我有一个必须响应手机的网站.我用我的桌面创建了它.当我调整浏览器窗口时,它可以很好地用于手机,但是当我在真正的手机上查看它时:三星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 那么不要忘记关闭元素标签

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