自适应网页设计在台式机上有效，但在移动设备上无效

117

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

有什么问题吗？

mobile web responsive-design

— 塔达斯·戴维森纳斯（Tadas Davidsonas）
source

1

您将不得不添加更多信息和代码，以对任何人有所帮助。你的CSS，HTML等什么框架（如Twitter的引导），你正在使用，如果有的话，等

— ajacian81

306

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

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

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

更多信息在这里。

— 阿古什
source

2

它可以在没有此行的浏览器上工作，但在移动设备上只需要此行。

— 塔达斯·戴维森纳斯（Tadas Davidsonas）

3

我就是爱你

— Dimitris Filippou

我也爱你@ΔημήτρηςΦιλίππου–

— Agush

向您

— 表达爱意的

3

确保产品index.html实际包括标签以及开发内容index.html

— halafi

6

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

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

— 赛义伊斯兰教
source

2

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

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

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

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

— 沙达布·艾哈迈德（Shadab Ahmed）
source

-1

响应式元标记

为确保所有设备都能正确渲染和触摸缩放，请将响应式视口元标记添加到中<head>。

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

— 马塞洛奥地利
source