响应式设计 - Media Query 不适用于 iPhone? [英] Responsive design - Media Query not working on iPhone?

问题描述

我正在尝试为我的网站创建一个适合移动设备的版本，以使我的网站能够响应较小的屏幕尺寸并相应地进行缩放.

I am trying to create a mobile friendly version of my website, to make my website responsive to a smaller screen size and scale accordingly.

我创建了一些媒体查询，当在桌面上调整大小时，它们在浏览器中的行为正确.

I've created some media queries, that behave correctly in a browser when resizing on a desktop.

在我的 iPhone 上，safari 只是缩小了整个网站，但仍保持整个网站的纵横比.如何让媒体查询被观察?我错过了什么吗?

On my iPhone, safari just shrinks the entire website but still maintains the aspect ratio of the full sized site. How do I get the media query to be observed? have I missed something?

这是一个指向我正在尝试正常工作的沙箱的链接 - 感谢任何帮助或建议:

Here is a link to a sandbox which I am trying to get working correctly - any help or suggestions are appreciated:

http://www.preview.brencecoghill.com/

推荐答案

你的 html 中有视图端口的元数据吗?

Do you have the meta for view port in your 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/

这篇关于响应式设计 - Media Query 不适用于 iPhone?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！