我想创建自己的网站的移动版本友善，让我的网站响应一个较小的屏幕尺寸和相应的规模。
我已经创造了一些媒体的质疑，即在桌面上调整时，在浏览器中表现正常。
在我的iPhone，Safari浏览器只是缩小了整个网站，但仍然保持了全尺寸的网站的纵横比。 我怎么待观察媒体查询？ 有我错过了什么？
这里的沙箱，我想获得正常工作的链接 - 任何帮助或建议表示赞赏：
http://www.preview.brencecoghill.com/
Answer 1:
你有没有在你的HTML视图端口元？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
更多资讯： http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
Answer 2:
我想你会发现在Chrome与警告; 而不是，这应该只是罚款：
<meta name="viewport" content="width=device-width, initial-scale=1">
Answer 3:
我刚刚经历了最离奇的事情了一天解决此相同的问题之后。 一些尝试，如果一切都失败了......
我的网页是发展过程中却没有关于我的笔记本电脑完全反应在我的iPhone，iPad和三星。 我终于发现，我不得不把注释行的DOCTYPE声明之后和HTML语言的语句，如在此之前：
<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
最后，我的网页是响应在移动设备上。 奇怪的！
文章来源: Responsive design - Media Query not working on iPhone?
