响应式网页设计可以在桌面上工作,但不能在移动设备上工作

我有一个网站,必须对手机响应。我用我的桌面创建了它。当我调整浏览器窗口时,它在手机上运行良好,但是当我在真正的手机上检查它时,Samsung Galaxy S II 对手机视图没有反应。

会有什么问题呢?

131088 次浏览

你可能错过了 html 头部的 viewport 元标签:

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

如果没有它,设备假定并设置视口为全尺寸。

更多信息 给你

有响应的元标签

为了确保适当的渲染和触摸缩放所有设备,添加响应的视口元标记到您的 <head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

我也遇到过这个问题,最后我找到了解决的办法。 使用以下代码。希望: 问题能得到解决。

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

虽然上面已经回答了,使用也是正确的

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

但是如果您使用的是 React 和 webpack,那么不要忘记关闭元素标记

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