iPhone被忽略CSS媒体查询。视口标签存在。在桌面工作[关闭](iPhone is i

编辑：这是我的一个总的新秀错误。我在编一个不同的文件集到一个我测试。真诚的歉意所有谁回答来帮助我。我upvoted所有的答案，因为我至少学会了更多一点从你的所有媒体查询，但没有提供答案。什么现在与此票据做咨询请？

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

该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>

Answer 1:

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

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

BBTony，我希望这对你的作品。

我让下面的，因为它比我找到其他地方的问题的更详细的描述。我不喜欢我的第一个解决方案（线下）这么多，我重新研究，无数次-感谢这个帖子这给了我不可笑上述溶液importants！

编辑：这也是工作，但它是非常不雅的：把对媒体的查询条件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忽略，但相同的媒体查询是被正确拾起运行iOS 6的iPhone 4S。

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

很奇怪的是，当媒体查询中的大多数声明都由旧款iPhone忽视，其中一些人被尊重。然而，新的iPhone 4S尊重所有的CSS媒体查询中，符合市场预期。在Safari浏览器的桌面，媒体查询所有的工作完美，在两个断点捕捉（有2个）。

我LINTED我的CSS通过几个不同的棉短绒，看完之后这里是CSS的错误可能导致移动浏览器忽略媒体查询。使某些我的CSS顺应，而只是为了它的地狱，我把每一个后后重要声明和媒体查询中CSS的每一行-就像80-100 importants！

普雷斯托。

我不能告诉你它是如何疯狂让我这个连的工作，我很好奇为什么老iphone只能尊重与条件！在这种情况下非常重要。

Answer 2:

我以前用这个为我的网站和它的工作为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 */
}

回答其他问题像这样似乎表明， 480px的max-device-width是你应该去什么在你的媒体查询。

文章来源: iPhone is ignoring CSS media queries. Viewport tag present. Working in desktop [closed]