7

编辑：这对我来说是一个完全的新手错误。我正在编辑与我正在测试的文件集不同的文件集。向所有回答帮助我的人表示诚挚的歉意。我对所有答案都投了赞成票，因为我至少从你们所有人那里学到了更多关于媒体查询的知识，但没有人提供答案。请就现在如何处理这张票提出建议？

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

viewport标签存在。我在用着：

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

当我在 Chrome 中调整浏览器窗口的大小时，它运行良好，并且我可以看到它在到达新断点时捕捉到它们，但是 iPhone Safari 仅显示站点的左上角，没有任何查询的迹象。

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

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

4

2 回答 2

11

编辑 为我解决这个问题的是双（“或”操作）媒体查询，用于最大设备宽度或最大宽度。这就像 David Rönnqvist 的第一个建议，但它只是将max-width, max-device-widthBOTH 放在对我有用的媒体查询中。

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

BBTony，我希望这对你有用。

我保留以下内容，因为它比我在其他任何地方找到的问题更全面的描述。我非常不喜欢我的第一个解决方案（线下），以至于我重新研究了第一千次 - 感谢这篇文章，它给了我上面的解决方案，而没有荒谬的 !importants。

编辑：这也有效，但它非常不优雅：在媒体查询条件 CSS 的每一行都放置“！important”。

我不愿意提出这个作为答案，但是在疯狂地研究了 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 个）。

在阅读了这里的 CSS 错误会导致移动浏览器忽略媒体查询之后，我通过几个不同的 linters 对我的 CSS 进行了 linting 。在确定我的 CSS 是合规的之后，我在媒体查询中的每一行 CSS 后面加上 !important 声明——比如 80-100 !importants。

快速。

我无法告诉你这让我多么生气，这甚至可以奏效，我很好奇为什么旧 iphone 在这种情况下只会尊重带有 !important 的条件。

于 2013-05-14T06:13:53.310 回答
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您应该在媒体查询中使用。

于 2013-04-30T15:37:16.397 回答