响应式设计 - Media Query无法在iPhone上运行？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式设计 - Media Query无法在iPhone上运行？相关的知识，希望对你有一定的参考价值。
我正在尝试创建一个移动友好版本的网站，以使我的网站响应较小的屏幕尺寸和相应的比例。
我创建了一些媒体查询，在桌面上调整大小时在浏览器中表现正常。
在我的iPhone上，safari只缩小整个网站，但仍保持整个网站的宽高比。如何查看媒体查询？我错过了什么吗？
这是一个沙箱的链接，我正在尝试正常工作 - 任何帮助或建议表示赞赏：
答案
你的html中有视口元素吗？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
另一答案
我想你会在Chrome中找到警告;而不是，这应该工作得很好：
<meta name="viewport" content="width=device-width, initial-scale=1">
另一答案
在对同一问题进行一天的故障排除后，我刚刚遇到了最奇怪的事情。如果所有其他方法都失败了，可以试试......
我的网页在开发过程中对我的笔记本电脑完全响应，但不是在我的iPhone，iPad或三星上。我终于发现我必须在DOCTYPE语句之后和html lang语句之前添加注释行，如下所示：
<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
最后，我的网页对移动设备做出了响应。奇怪的！
以上是关于响应式设计 - Media Query无法在iPhone上运行？的主要内容，如果未能解决你的问题，请参考以下文章