我正在尝试创建我的网站的移动友好版本，以使我的网站响应更小的屏幕尺寸并相应地缩放。
我创建了一些媒体查询，当在桌面上调整大小时，它们在浏览器中的行为正确。
在我的 iPhone 上，Safari 只是缩小了整个网站，但仍保持全尺寸网站的纵横比。如何让媒体查询被观察？我错过了什么吗？
这是一个沙盒的链接，我正在尝试使其正常工作 - 感谢您提供任何帮助或建议：
问问题
46627 次
3 回答
82
您的 html 中是否有用于查看端口的元数据？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
于 2012-10-22T00:09:42.040 回答
16
我想你会在 Chrome 中找到一个警告：而不是 , 这应该可以正常工作：
<meta name="viewport" content="width=device-width, initial-scale=1">
于 2013-08-21T13:07:21.257 回答
1
在解决同样的问题一天后，我刚刚经历了最奇怪的事情。如果一切都失败了，可以尝试一下……
在开发过程中，我的页面在我的笔记本电脑上完全响应，但在我的 iPhone、iPad 或三星上却没有。我终于发现我必须在 DOCTYPE 语句之后和 html lang 语句之前放置一个注释行，如下所示：
<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
最后，我的页面可以在移动设备上响应。奇怪的！
于 2018-03-03T23:16:34.897 回答