我正在尝试创建一个适用于移动设备的网站版本，以便使我的网站在小屏幕上响应并相应缩放。
我创建了一些媒体查询，在桌面浏览器上调整大小时可以正确地工作。
在我的iPhone上，Safari只是缩小整个网站，但仍保持完整尺寸网站的宽高比。如何使媒体查询被观察到？我有没有漏掉什么？
这里是一个沙箱链接，我正在努力让它正常工作 - 欢迎任何帮助或建议：
3个回答
86
你的 HTML 中是否有视口的元数据？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- coopersita
2
16
我认为你在Chrome中使用“;”而不是“,”会遇到警告。 以下应该正常工作：
<meta name="viewport" content="width=device-width, initial-scale=1">
- Must Impress
2
我刚刚经历了一件非常奇怪的事情，在为此问题疲于奔命一整天后。如果其他方法都不起作用，可以尝试以下方法...
在开发期间，我的页面在笔记本电脑上完全响应，但在iPhone、iPad或三星手机上却无法响应。最后我发现，在DOCTYPE语句之后、html lang语句之前必须加上注释行，如下所示：
最终，我的页面在移动设备上具有响应性。奇怪！
在开发期间，我的页面在笔记本电脑上完全响应，但在iPhone、iPad或三星手机上却无法响应。最后我发现，在DOCTYPE语句之后、html lang语句之前必须加上注释行，如下所示：
<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
最终，我的页面在移动设备上具有响应性。奇怪！
- Filemangler
1
尽管我已经包含了所有的注释行和元标签，但我的应用程序仍然无法工作。 - Prasanna
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
<meta name="viewport" content="width=device-width, initial-scale=1.0">。 - penfold