iPhone 5上CSS媒体查询无法正常工作

Question

3

我将使用CSS媒体查询来构建响应式网站。以下是一个相关页面：http://sergedenimes.com/shop/。我使用了以下查询来激活智能手机的样式：

    @media only screen 
and (max-width:640px){
    //styles
}

当我调整浏览器大小时，样式被捕获并呈现智能手机布局。然而，当我在我的iPhone 5上访问页面时，媒体查询似乎没有被捕获。有任何想法吗？我有另一个使用相同媒体查询的站点，它可以正常工作。

在Mac上测试了Chrome和Firefox，在iPhone上测试了Chrome和Safari。

- harryg

它被捡起来了？就是激活了吗？那是正确的行为。 - Cole Tobin

抱歉，打错了。智能手机没有检测到它。 - harryg

2

请尝试将此代码添加到您的文档中：<meta name="viewport" content="width=device-width, initial-scale=1.0">。 - khollenbeck

如果你必须要投反对票/关闭，知道原因会很有帮助，@Cole"Cole9"Johnson。其他人都理解我的问题，并且乐于提供答案。 - harryg

我没有说是你，但有人这样做了，我猜想你给了负评。但这只是一个猜测，如果我错了，请原谅。 - harryg

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- André Dion · Accepted Answer

你没有<meta name="viewport">标签，所以iPhone会对你的页面进行缩放以适应屏幕。

编辑

Kris Hollenbeck比我先发了。尝试添加这个标签：

<meta name="viewport" content="width=device-width">