iPhone忽略CSS媒体查询。已经存在viewport标签。在桌面上运行。

Question

iPhone忽略CSS媒体查询。已经存在viewport标签。在桌面上运行。

7

编辑：这是我犯的一个很愚蠢的错误。我在编辑一个不同的文件集时，而不是测试一个文件集。向所有帮忙回答我的人表示真诚的道歉。我已经赞同了所有的答案，因为你们让我对媒体查询有了更深入的了解，但没有提供答案。请给我一些建议，现在该怎么处理这个问题？

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

viewport标签存在。我正在使用：

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

当我在Chrome中调整浏览器窗口的大小时，它表现得很好，我可以看到它按照达到的新断点捕捉，然而iPhone Safari只显示网站的左上角，没有任何迹象表明它正在接受任何查询。

我在iPhone portrait模式下使用的CSS Media query是：

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

- BB Tony

max-width和max-device-width有什么区别？ - David Rönnqvist

谢谢。不，那行不通。 - BB Tony

如果那个最小化的示例可以工作，但完整的示例不能工作，那么可能是你的某个CSS文件损坏了，或者有多个媒体查询互相覆盖。 - David Rönnqvist

@DavidRönnqvist：我最真诚的道歉：我的页面指向了一个与我正在工作的不同的URL。新手错误。非常抱歉浪费了您帮助我的时间。 - BB Tony

@nimmolo：我最诚挚的道歉：我的页面指向了一个不同的URL，而不是我正在工作的那个。新手错误。非常抱歉浪费了您投入帮助我的时间。 - BB Tony

2个回答

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 */
}

其他类似问题的答案（如此）表明，在媒体查询中，max-device-width应该使用480px。

- David Rönnqvist

谢谢。看起来没问题。我越深入研究，就越认为我触发了一些不寻常的 bug。 - BB Tony

@BBTony（既然这是你在这里的第一个问题），如果答案有用，请考虑给它点赞。如果它解决了你的问题，请考虑将其标记为“已接受”。但不要仅仅因为我或其他人告诉你而这样做。如果你的问题仍未得到解答，请考虑编辑更多细节以帮助我们理解问题。 - David Rönnqvist

谢谢建议。仍在学习中。我会这样做的。谢谢。还在研究中。找到解决方案后，我会自己发布答案。 - BB Tony

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

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

- nimmolo · Accepted Answer

编辑对我来说解决这个问题的方法是使用双重（“或”运算）媒体查询，针对max-device-width或max-width。这就像David Rönnqvist的第一个建议，但只有在媒体查询中同时放置max-width, max-device-width才适用于我。

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

BBTony，我希望这对你有用。

我保留以下原因是它是一个比我在其他任何地方找到的问题更详细的描述。我非常不喜欢我的第一个解决方案（下面的那个），所以我再次进行了调研 - 感谢这篇文章，给了我上面的解决方案，而没有令人荒谬的!importants。

编辑：这也行得通，但太丑陋了：在媒体查询条件CSS的每一行上放置"!important"。

我不愿意将其作为答案提出来，但是在疯狂研究了3天之后，这是对我有效的第一件事。

问题的完整描述：我有与BBTony类似的症状。我有viewport标签（并且我把它放在样式表上方，如建议所述）。

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

我的媒体查询是为了捕捉任何较小的设备，但iPhone 3gs运行iOS 5.1时忽略了它，而相同的媒体查询被iPhone 4s运行iOS 6正确地拾取。

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

很奇怪的是，尽管旧版iPhone忽略了媒体查询中的大多数声明，但其中一些声明仍然被尊重。然而，像预期的那样，新版iPhone 4S尊重了媒体查询中的所有CSS。在Safari桌面版中，所有媒体查询都完美地工作，在两个断点处都能生效（共有两个）。

我通过几个不同的linters对我的CSS进行了检查，因为在这里读到CSS错误可能会导致移动浏览器忽略媒体查询。确保我的CSS符合规范后，我为每个媒体查询中的CSS添加了!important声明，像80-100个!important那样。

完成了。

我无法告诉你这甚至还能起作用让我多么疯狂，我很好奇为什么旧版iPhone只会在这种情况下尊重带有!important的条件语句。