iPhone 忽略了 CSS 媒体查询.存在视口标签.在桌面上工作 [英] iPhone is ignoring CSS media queries. Viewport tag present. Working in desktop
问题描述
这完全是我的菜鸟错误.我正在编辑与我正在测试的文件集不同的文件集.向所有回答帮助我的人表示诚挚的歉意.我已经对所有答案投了赞成票，因为我至少从你们所有人的媒体查询中学到了更多，但没有人提供答案.建议现在如何处理这张票?
This was a total rookie error on my part. I was editing a different fileset to the one I was testing. Sincere apologies to all who answered to help me out. I've upvoted all answers as I at least learned a little more on media queries from you all, but none provided the answer. Advice pls on what now to do with this ticket?
这是网站上的一个热门话题，但我还没有看到这个问题的解决方案.
This is a busy topic on the site, but I haven't seen the solution for this problem.
存在 viewport 标签.我正在使用:
The viewport tag is present. I'm using:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
当我在 Chrome 中调整浏览器窗口的大小时，它工作正常，我可以看到它在到达新断点时捕捉到新断点，但是 iPhone Safari 只显示站点的左上角，没有任何查询的迹象.
When I resize the browser window in Chrome, it works fine, and I can see it snapping to new breakpoints as they are reached, however iPhone Safari displays the top left of the site only, with no sign of picking up any queries.
我用于 iPhone 肖像的 CSS 媒体查询是:
The CSS Media query I'm using for iPhone portrait is:
@media (max-width: 321px) { }
我使用的是 Bootstrap 和 LESS，所以我的媒体查询位于样式的末尾.
I'm using Bootstrap and LESS, so my media queries are at the end of the styles.
抱歉，我无法分享这方面的代码.这很奇怪——我希望有人能看到我是否遗漏了什么.
Sorry I'm not in a position to share code on this. It's an odd one — I'm hoping someone can see if there's something I may be missing.
编辑
这是一个在我的 iPhone 上运行的非常基本的例子.我可以从纵向旋转到横向并且背景颜色会改变 - 所以我使用的媒体查询没有任何问题:
Here's a very basic example which is working on my iPhone. I can rotate from portrait to landscape and the bg color will change - so there's nothing wrong with the media query I'm using:
<!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-device-width 还是 max-width.这就像 David Rönnqvist 的第一个建议，但它只是将 max-width, max-device-width BOTH 放在对我有用的媒体查询中.
Edit
What solved this for me is a double ("or"-operated) media query, for either max-device-width or max-width. It's like David Rönnqvist's first suggestion, but it was only putting max-width, max-device-width BOTH in the media query that worked for me.
@media screen and (max-device-width:640px), screen and (max-width:640px) {
/* styles here */
}
BBTony，我希望这对你有用.
BBTony, I hope this works for you.
我保留以下内容，因为它比我在其他任何地方找到的问题描述都更完整.我非常不喜欢我的第一个解决方案(线下)，以至于我重新研究了第 1000 次 - 感谢 这篇文章 为我提供了上述解决方案，但没有荒谬的 !importants.
I'm keeping the below because it is a fuller description of the problem than i've found anywhere else. I disliked my first solution (below the line) so much that I re-researched for the thousandth time - thanks to this post which gave me the above solution without the ridiculous !importants.
这也有效，但非常不雅:在媒体查询条件 CSS 的每一行都加上!important".
this also worked, but it's extremely inelegant: Putting "!important" on every line of the media query conditional CSS.
我不情愿提出这个作为答案，但是在疯狂地研究了 3 天之后，这是对我有用的第一件事.
I was reluctant to propose that as an answer, but after going bonkers researching this for 3 days, it was the first thing that worked for me.
问题的完整描述:我的症状与 BBTony 相似.我有视口标签(我按照建议将它放在样式表上方).
Full description of the problem: I had similar symptoms as BBTony. I had the viewport tag (and I had it above the stylesheets as recommended).
<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 正确拾取了相同的媒体查询.
My media query, intended to catch any smallish device, was being ignored by an iPhone 3gs running iOS 5.1, but the same media query was being properly picked up by an iPhone 4s running iOS 6.
@media only screen and (max-device-width:640px) {
/* many styles here */
}
非常奇怪的是，虽然旧版 iPhone 忽略了媒体查询中的大多数声明，但其中一些声明得到了的尊重.然而，正如预期的那样，较新的 iPhone 4s 尊重媒体查询中的所有 CSS.在 Safari 桌面上，媒体查询都运行良好，在两个断点(有 2 个)处捕捉.
Very oddly, while most declarations within the media query were being ignored by the older iPhone, some of them were being respected. The newer iPhone 4s however respected all the CSS within the media query, as expected. On Safari desktop, the media queries all worked perfectly, snapping at both the breakpoints (there are 2).
在阅读了 此处 CSS 错误可能导致移动浏览器忽略媒体查询.在确定我的 CSS 是合规的之后，为了它的地狱，我在媒体查询中的每一行 CSS 之后放置了 !important 声明 - 比如 80-100 !importants.
I linted my CSS through several different linters, after reading here that CSS errors can cause mobile browsers to ignore media queries. After making certain that my CSS was compliant, and just for the hell of it, I put !important declarations after each and every line of CSS within the media query - like 80-100 !importants.
急速.
我无法告诉你这让我多么生气，因为它甚至有效，我很好奇为什么旧的 iphone 在这种情况下只会尊重带有 !important 的条件.
I can't tell you how mad it made me that this even worked, and I'm curious why the old iphone would only respect the conditional with !important in this case.
这篇关于iPhone 忽略了 CSS 媒体查询.存在视口标签.在桌面上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
