iPhone忽略CSS媒体查询。视口标签存在。在桌面上工作 [英] iPhone is ignoring CSS media queries. Viewport tag present. Working in desktop
问题描述
编辑：这是一个总的新手错误我的部分。我正在编辑一个不同的文件集，我正在测试。真诚的道歉，所有谁回答帮助我出去。我已经upvote所有的答案，因为我至少学习了一点更多的媒体查询从你们，但没有人提供答案。
这是一个繁忙的话题在网站上，但我避免了看到此问题的解决方案。
存在视口标记。我正在使用：
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
当我调整Chrome浏览器窗口的大小时，它工作正常，我可以看到它捕捉到新断点，但是iPhone Safari只显示网站的左上角，没有任何查询的迹象。
我使用的CSS媒体查询对于iPhone肖像是：
@media（max-width：321px）{}
我使用Bootstrap和LESS，所以我的媒体查询是在样式的结尾。
对不起，我不能在这里共享代码。这是一个奇怪的 - 我希望有人能看到是否有可能丢失的东西。
编辑
这是一个非常基本的例子，在我的iPhone上工作。我可以从纵向旋转到横向和bg颜色将改变 - 所以我使用的媒体查询没有错误：
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< style type =text / css>
body
{
background：blue;
}
@media（max-width：321px）
{
body
{
background：red;
}
}
< / style>
< / head>
< body>
这是我的内容...
< / body>
编辑
我为什么解决这个问题是一个双重（或操作）媒体查询，max-device-width或max-width。这就像DavidRönnqvist的第一个建议，但它只是在为我工作的媒体查询中 max-width，max-device-width BOTH。
@media screen and（max-device-width：640px），screen and（max-width：640px）{
/ * /
}
BBTony，我希望这个适合你。
我保持下面，因为它是一个比我在其他地方发现的问题更全面的描述。我不喜欢我的第一个解决方案（下面的线）这么多，我重新研究了千分之一 - 感谢这个帖子，给我上面的解决方案没有可笑的！importants。
编辑：这也工作，但它是非常inelegant：在媒体查询条件CSS的每一行！important。
我不愿意建议作为一个回答，但后去bonkers研究这3天，这是第一件事对我有用。
问题的完整描述：我有与BBTony类似的症状。我有视口标签（和我有它的推荐上面的样式表）。
< meta name =viewportcontent =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 -device-width：640px）{
/ *这里有很多样式* /
}
很奇怪，虽然媒体查询中的大多数声明被旧iPhone忽略，但其中一些 受到尊重。然而，新的iPhone 4s尊重媒体查询中的所有CSS，如预期。在Safari桌面上，媒体查询都工作得很好，在两个断点处都有效（有2个）。
我通过几个不同的linters href =http://stackoverflow.com/questions/15976751/safari-ignoring-css-max-width-media-queries-below-a-certain-point>这里 CSS错误可能会导致移动浏览器以忽略媒体查询。确定我的CSS是兼容的，只是为了地狱，我把！重要声明后的媒体查询中的每一行CSS - 像80-100！importants。
Presto。
我不能告诉你它是多么疯狂，这使我甚至工作，我很好奇为什么旧的iphone只会尊重条件的！
EDIT: 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.
The viewport tag is present. I'm using:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
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.
The CSS Media query I'm using for iPhone portrait is:
@media (max-width: 321px) { }
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.
EDIT
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>
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, I hope this works for you.
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.
Edit: this also worked, but it's extremely inelegant: Putting "!important" on every line of the media query conditional CSS.
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.
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" />
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 */
}
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).
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.
Presto.
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屋！
