iPhone 忽略 CSS 媒体查询。存在视口标签。在桌面上工作[关闭]
Posted
技术标签:
【中文标题】iPhone 忽略 CSS 媒体查询。存在视口标签。在桌面上工作[关闭]【英文标题】：iPhone is ignoring CSS media queries. Viewport tag present. Working in desktop [closed] 【发布时间】：2013-04-24 11:49:09 【问题描述】：编辑：这完全是我的新手错误。我正在编辑与我正在测试的文件集不同的文件集。向所有回答帮助我的人表示诚挚的歉意。我对所有答案都投了赞成票，因为我至少从你们所有人那里学到了更多关于媒体查询的知识，但没有人提供答案。请问现在如何处理这张票？
这是网站上的一个繁忙话题，但我还没有看到这个问题的解决方案。
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>
【问题讨论】：
max-width vs max-device-width?
谢谢。不，那没有用。
如果这个最小的示例有效，但完整的示例无效，那么您可能在某处有损坏的 CSS 或多个相互覆盖的媒体查询
@DavidRönnqvist：最诚挚的歉意：我的页面指向的 URL 与我正在处理的页面不同。菜鸟错误。很抱歉浪费您的时间来帮助我。
@nimmolo：我最诚挚的歉意：我的页面指向的 URL 与我正在处理的页面不同。菜鸟错误。很抱歉浪费您的时间来帮助我。
【参考方案1】：
我以前在我的网站上使用过它，它对我来说是 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 的答案似乎表明max-device-width 的480px 是您在媒体查询中应该使用的。
【讨论】：
谢谢。看起来是对的。我对此研究得越多，我就越认为我触发了一些不寻常的错误。 @BBTony（因为这是您在这里的第一个问题）如果答案有用，请考虑对其进行投票。如果它解决了您的问题，请考虑将其标记为“已接受”。但不要仅仅因为我或其他人告诉你就这样做。如果您的问题仍未得到解答，请考虑对其进行更详细的编辑，以帮助我们理解问题。 感谢您的建议。仍在学习绳索。我会照办的。谢谢。仍在调查中。当我找到解决方案时会自己发布答案。【参考方案2】：编辑
为我解决这个问题的是双（“或”操作）媒体查询，对于最大设备宽度或最大宽度。这就像 David Rönnqvist 的第一个建议，但它只是将 max-width, max-device-width BOTH 放在对我有用的媒体查询中。
@media screen and (max-device-width:640px), screen and (max-width:640px)
/* styles here */
BBTony，我希望这对你有用。
我保留以下内容，因为它比我在其他任何地方找到的更全面地描述了问题。我非常不喜欢我的第一个解决方案（线下），以至于我第一千次重新研究 - 感谢this post，它给了我上面的解决方案，没有荒谬的 !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 个）。
在阅读 here 后，我通过几个不同的 linters 对我的 CSS 进行了 linting，CSS 错误会导致移动浏览器忽略媒体查询。在确定我的 CSS 是合规的之后，我在媒体查询中的每一行 CSS 之后都放了 !important 声明 - 比如 80-100 !importants。
快速。
我无法告诉你这让我多么生气，这甚至可以奏效，而且我很好奇为什么旧 iphone 在这种情况下只会尊重带有 !important 的条件。
【讨论】：
感谢您对此进行调查。我暂时离开了那个项目，但会回到它，所以我会记住你的解决方案。 以上评论已编辑。一旦我正确消化了您的答案。道歉... 有一个类似的问题，当iphone翻转到水平状态时css规则没有生效，只有在页面刷新时才激活css规则。这为我修好了！以上是关于iPhone 忽略 CSS 媒体查询。存在视口标签。在桌面上工作[关闭]的主要内容，如果未能解决你的问题，请参考以下文章