我正在尝试创建一个适合我网站的移动设备版本，以使我的网站能够响应较小的屏幕尺寸并相应缩放。
我创建了一些媒体查询，在桌面上调整大小时在浏览器中正常运行。
在我的iPhone上，safari只会收缩整个网站，但仍保持整个网站的宽高比。如何查看媒体查询？我错过了什么吗？
以下是我正在尝试正常工作的沙箱的链接 - 感谢任何帮助或建议：
答案 0 :(得分：75)
你的html中是否有视图端口元？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
答案 1 :(得分：14)
我认为您会在Chrome中发现警告;代替 ， 这应该可以正常工作：
<meta name="viewport" content="width=device-width, initial-scale=1">
答案 2 :(得分：0)
在对同一问题进行一天的故障排除后，我刚刚遇到了最奇怪的事情。如果所有其他方法都失败了，可以试试......
我的网页在开发过程中对我的笔记本电脑完全响应，但不在我的iPhone，iPad或三星上。我终于发现我必须在DOCTYPE语句之后和html lang语句之前添加注释行，如下所示：
<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
最后，我的网页对移动设备做出了响应。怪异！