响应式设计 - Media Query无法在iPhone上运行？

Question

我正在尝试创建一个移动友好版本的网站,以使我的网站响应较小的屏幕尺寸和相应的比例.

我创建了一些媒体查询,在桌面上调整大小时在浏览器中表现正常.

在我的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">