我正在尝试创建我的网站的移动友好版本，以使我的网站响应较小的屏幕尺寸并相应地缩放。
我创建了一些媒体查询，当在桌面上调整大小时，它们在浏览器中的行为正确。
在我的 iPhone 上，safari 只是缩小了整个网站，但仍保持全尺寸网站的纵横比。如何让媒体查询被观察到？我错过了什么吗？
这里是一个沙箱的链接，我正在努力使它正常工作——感谢任何帮助或建议:
最佳答案
您的 html 中是否有视口(viewport)的元数据？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
关于css - 响应式设计 - 媒体查询不适用于 iPhone？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13002731/