编辑：这是一个新手的错误。我正在编辑一个不同的文件集，我正在测试。真诚的道歉，所有谁回答，以帮助我了。我已经投票赞成所有的答案，因为我至少学到了一点更多的媒体查询从你们所有人，但没有提供答案。建议请现在做什么与此票？
这是网站上的一个忙碌主题，但我还没有看到这个问题的解决方案。viewport标记存在。我正在使用：
<meta name="viewport" content="width=device-width,initial-scale=1.0">当我在Chrome中调整浏览器窗口的大小时，它工作正常，我可以看到它在到达新的断点时会迅速捕捉到断点，但iPhone Safari只显示网站的左上角，没有任何接收任何查询的迹象。
我在iPhone肖像中使用的CSS Media查询是：
@media (max-width: 321px) { }我使用Bootstrap和LESS，所以我的媒体查询在样式的末尾。
抱歉，我不能分享这方面的代码。这是一个奇怪的-我希望有人能看看是否有什么我可能错过了。
编辑
下面是一个在我的iPhone上运行的非常基本的例子，我可以从纵向旋转到横向，背景颜色也会改变--所以我使用的媒体查询没有任何问题：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css">
body
{
background: blue;
}
@media (max-width: 321px)
{
body
{
background: red;
}
}
</style>
</head>
<body>
Here is my content...
</body>
2条答案
按热度按时间ojsjcaue1#
Edit解决这个问题的方法是一个双（“or”-operated）媒体查询，要么是max-device-width，要么是max-width。这就像大卫Rönnqvist的第一个建议，但它只在媒体查询中放入
max-width, max-device-widthBOTH，对我来说是有效的。BBTony，我希望这对你有用。
我保留下面的内容是因为它比我在其他任何地方找到的都更全面地描述了这个问题。我非常不喜欢我的第一个解决方案（线以下），以至于我第一千次重新研究-感谢this post，它给了我上面的解决方案，没有荒谬的！重要的东西。
**编辑：这也能用，但非常不优雅：**在媒体查询条件CSS的每一行都加上“！important”。
我不愿意提出这一点作为一个 * 答案 *，但经过疯狂的研究了3天，这是第一件事，为我工作。
问题的完整描述：我有和BBTony相似的症状。我有视口标记（并且我按照建议把它放在样式表上面）。
我的媒体查询，旨在捕捉任何小型设备，被忽略的iPhone3gs运行iOS5.1，但同样的媒体查询是正确地拿起一个iPhone4s运行iOS6。
非常奇怪的是，旧版iPhone忽略了媒体查询中的大多数声明，但其中一些声明*得到了尊重。新一代iPhone 4s却尊重了媒体查询中的所有CSS，正如预期的那样。在Safari桌面上，媒体查询都工作得很完美，在两个断点处都很好（有2个）。
我通过几个不同的链接器来链接我的CSS，在阅读了here之后，CSS错误会导致移动的浏览器忽略媒体查询。在确定我的CSS是兼容的之后，为了好玩，我在媒体查询中的每一行CSS后面都放了！important声明--大约80-100！importants。
快
我无法告诉你这让我有多生气，甚至工作，我很好奇为什么旧的iPhone只会尊重条件与！重要的在这种情况下。
r3i60tvu2#
我以前在我的网站上使用过这个，它对我来说是iPhone特定的媒体查询
对其他问题like this的回答似乎表明，
max-device-width的480px是您在媒体查询中应该选择的。