iPhone忽略了CSS媒体查询。存在视口标记。在桌面工作

编辑：这是我的一个总菜鸟错误。我正在编辑一个不同的文件集到我正在测试的那个。对所有回答我的人表示诚挚的歉意。我已经提出了所有答案，因为我至少从你们所有人那里了解了更多关于媒体的问题，但没有人提供了答案。建议请问现在怎么办这张票？iPhone忽略了CSS媒体查询。存在视口标记。在桌面工作

这是网站上的一个繁忙的话题，但我还没有看到解决这个问题的方法。

viewport标记存在。我使用的是：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

当我调整在Chrome浏览器窗口，它工作得很好，我可以看到它捕捉到，因为他们达到了一个新的断点，但iPhone Safari浏览器会显示该网站的左上角只，没有迹象表明任何疑问。

我使用iPhone的肖像CSS媒体查询是：

@media (max-width: 321px) { }

我使用的是引导少，所以我的媒体查询是在样式的结束。

对不起，我无法在此共享代码。这是一个奇怪的 - 我希望有人能够看到我是否可能会失踪。

编辑

这里是它的工作在我的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>

来源

2013-04-30 BB Tony

'max-width' vs'max-device-width'？ – 2013-04-30 14:07:43

谢谢。不，那没用。 – 2013-04-30 15:24:23

如果这个最小的例子有效，但完整的例子没有，那么你可能有一个破碎的CSS或多个媒体 - 查询互相覆盖 – 2013-05-02 07:25:57

我以前用这个为我的网站和它的工作作为iPhone特定媒体的查询，我

@media only screen 
    and (max-device-width: 480px) 
    and (orientation:landscape) { 
    /* iPhone landscape */ 
} 

@media only screen 
    and (max-device-width: 480px) 
    and (orientation:portrait) { 
    /* iPhone portrait */ 
}

解答其他问题like this似乎表明，480px为max-device-width是你应该去什么在你的媒体查询。

来源

2013-04-30 15:37:16

谢谢。这看起来不错。我越看到这一点，就越觉得我触发了一些不寻常的错误。 – 2013-04-30 15:45:45

@BBTony（如果这是你的第一个问题）如果答案是有用的，考虑提高它。如果它解决了您的问题，请考虑将其标记为“已接受”。但不要因为我或其他人告诉你而这样做。如果您的问题仍未得到解答，请考虑进行更详细的编辑以帮助我们了解问题。 – 2013-05-02 07:23:59

感谢您的建议。还在学习绳索。我会照办的。谢谢。仍在研究它。当我找到解决方案时，我会自己发布答案。 – 2013-05-03 07:54:58

编辑什么解决这对我来说是一个双引号（“或” -operated）媒体查询，对于无论是最大设备宽度或最大宽度。这就像DavidRönnqvist的第一个建议，但它只是把max-width, max-device-width都放在媒体查询中，这对我来说很有用。

@media screen and (max-device-width:640px), screen and (max-width:640px) { 
    /* styles here */ 
}

BBTony，我希望这对你有用。

我保留下面的内容，因为它比我在其他地方找到的更全面。我不喜欢我的第一个解决方案（低于线路），所以我重新研究了第一千次 - 感谢this post，它给了我上面的解决方案，没有可笑的重要性。

编辑：这也是工作，但它是非常不雅：把“重要！”在媒体查询条件CSS的每一行。

我不愿意提出，作为回答，但经过躁狂者研究这3天后，这是我的第一件事情。

问题的完整描述：我的症状与BBTony相似。我有视口标签（我推荐它在样式表上方）。

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

我的媒体查询，意在捕捉任何短小的设备，正被运行iOS 5.1的iPhone 3GS忽略，但相同的媒体查询是被正确拾起一个iPhone 4S运行iOS 6

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

奇怪的是，虽然媒体查询中的大多数声明都被较旧的iPhone忽略，但其中一些被所尊重。不过，如预期的那样，较新的iPhone 4在媒体查询中尊重了所有的CSS。在Safari桌面上，媒体查询完美运行，在两个断点处捕捉（有2个）。

我在阅读here之后，通过几种不同的短文将我的CSS弄了一遍，发现CSS错误会导致移动浏览器忽略媒体查询。在确定我的CSS符合要求后，我只需在媒体查询之后的每一行CSS后面加上！重要声明 - 例如80-100！important。

Presto。

我不能告诉你它让我觉得这样做有多疯狂，而且我很好奇为什么旧iphone只会尊重条件！

来源

2013-05-14 06:13:53 nimmolo

感谢您关注此事。我暂时不在这个项目中，但会回到它，所以我会记住你的解决方案。 – 2013-05-15 07:14:33

上面编辑过的评论。一旦我正确消化了你的答案。道歉... – 2013-05-15 07:18:11

有一个类似的问题，其中一个css规则没有影响，当iphone被翻转到水平状态，只有当页面刷新它激活css规则。这为我修好了！ – 2016-06-20 16:40:20

iPhone忽略了CSS媒体查询。存在视口标记。在桌面工作

回答

相关问题