浏览器对@media查询的解释存在错误 [英] Bug with browsers' interpretation of @media queries
问题描述
很久以前，有一个与此相关的
显示比例为1119像素时显示比例为125％ -未应用CSS媒体查询，因此CSS恢复为原始
.test {边框:10px实心#f00;高度:10px；}
小故障"的可能原因
如果是上述情况(或者即使不是)，我怀疑您的下一个问题是为什么会这样.只有开发人员才能回答这个问题，但从逻辑上考虑，我们可以提出以下推理.
媒体查询应做什么?
首先，我们需要研究媒体查询的目的.根据 W3C CSS3媒体查询建议:
宽度"媒体功能描述了输出设备目标显示区域的宽度.
由此，我们可以假定它们旨在根据与屏幕/窗口大小匹配的媒体查询来选择要使用的CSS.屏幕尺寸不能有小数像素(例如719.5像素)，并且整个像素之间的点只能存在".在调整屏幕大小时，媒体查询并不打算涵盖此类临时过渡.
好的，这就是为什么 不一定是"bug"，以及为什么现在在浏览器中无法总是很好地处理它……
在过渡期间导致此问题发生的原因是什么?
如果更改了比例，则浏览器必须重新计算所有尺寸以也将其放大/缩小.这种小故障"是指这些转换很可能是由于这些计算导致像素分数下降而引起的.(如果您尚未更改比例，则实际上仍然适用相同的逻辑)
似乎已经构建了诸如 Chrome 之类的浏览器来处理整个像素的重新计算/大小变化，因此显示将从(例如)应用的CSS跳转.)对CSS的 max-width:719px 媒体查询，对于 min-width:720px .
但是，其他浏览器(例如 Firefox )似乎无法正常工作，并尝试根据小数像素来计算显示.这意味着在某些情况下，重新计算/更改的大小介于例如 max-width:719px 或 min-width:720px .
在这种情况下，似乎可以将显示更改为当时适用的CSS-如果存在另一个媒体查询，这些查询与将要应用的尺寸重叠，但更可能会应用原始CSS .因此，您在该过渡中看到的是存在于媒体查询之外的CSS，例如如果您的CSS是针对移动设备而编写的，那么您会看到该网站的移动设备版本的CSS.
我们该怎么做才能解决"问题?它吗?
除了将比例缩放回100％(这是不可行的选择，因为您不能要求所有访问者都这样做！)我不知道是否有可靠的解决方案.
- 一种选择是在您提到的媒体查询中使用十进制值，例如
@media(最小宽度:720px)和(最大宽度:1119.999px){/* CSS .... */}@media(最大宽度:719.999px){/* CSS .... */} - 另一种尝试是确保在原始CSS中具有合适的样式，该样式将应用于居中"样式中.点，例如719px-720px.
There was a question related to this one a long time ago, but which was never responded to or resolved.
I am developing a web site that has distinct screen layouts, which depend upon the width of the viewport/window.
@media (min-width: 1120px) { }
/* behaviour as expected */
@media (min-width: 720px) and (max-width: 1119px) { }
/* inconsistent behaviour in Firefox and Edge, mixing elements of above and below */
@media (max-width: 719px) { }
In my browser of preference, Chrome, the layouts transition perfectly from the largest screen width to the smallest. The same is true of Opera. However, both Firefox and Edge demonstrate a strange behaviour whereby a single transitional width (of one pixel) causes the browser not to know how to interpret the content.
For example, as the window transitions to the narrowest media width, the title bar becomes narrower, no longer being required to accommodate the main menu, and the menu is hidden (display: none;) and replaced by a small menu icon at the side, which leads to a drop down on hover. But in Firefox and Edge, the main menu is not hidden, but instead crammed beside the logo until the window is collapsed one pixel further, after which the behaviour is as expected. These CSS changes are all under the same @media declaration!
Interestingly, the behaviour is not consistent. That is, the transition from the largest to the middle width is flawless, but the transition from the middle to the smallest is problematic.
Assuming that it was an issue with fractional size calculations, I added high precision to my @media query like this:
@media (max-width: 719.999px)
And again, the behaviour was inconsistent. If I adjusted the lower value up (i.e. 719px to 719.999px) there was no change. However, if I instead adjusted the higher value down (i.e. 720px to 719.001px) the problem was partially solved. Certain elements displayed expected behaviour, but again, other anomalies persisted. Similarly, the higher precision worked on Firefox but not Edge.
It seems probable, given the behaviour that I am seeing, that certain boundaries might cause problems, whilst others would not.
Is this just a known bug that web site developers have learnt to accept, or might there be an easy solution (other than simply selecting a different set of boundaries)?
It's difficult to give a specific answer without seeing what you are seeing, but it's possible that the browsers are handling the transition from one media query to the next in different ways discussed below.
Most Likely Cause: Windows Display Settings
I assume you are using Windows when you mention Edge, I suspect this might be because you have changed the scale of your display in Windows - Display Settings. If this is set to 125% for example, this can have an affect on all aspects of your display.
So really this isn't a bug with the media queries, so much as a discrepancy caused by the browsers not effectively handling the scaling by Windows Display settings.
UPDATE - Now that you have confirmed that you can stop on a particular point where this happens, then I'm pretty confident this is the cause. In my testing yesterday when looking into this, I was able to reproduce that behaviour when the display was scaled.
Using the following test case with original styling of an empty block with a red border, and different CSS applied at (max-width: 1119px) and (min-width: 1120px), the issue happens only when the display is scaled.
body{ margin:50px 0 0 0;}
.test {
border: 10px solid #f00;
height: 10px;
}
@media (min-width: 1120px) {
.test {
background: #ff0;
height: 500px
}
}
@media (min-width: 720px) and (max-width: 1119px) {
.test {
margin-left: 300px;
background: #0FF;
height: 200px
}
}
@media (min-width: 460px) and (max-width: 719px) {
.test {
margin-left: 300px;
background: #00f;
height: 200px
}
}
@media (max-width: 460px) {
.test {
background: #ff0;
height: 100px
}
}
<div class="test"></div>
Firefox, using Dev Console ruler to show window size:
Display Scale: 100% (i.e. no scaling) at 1119px width - CSS works as expected*
@media (min-width: 720px) and (max-width: 1119px) {
.test { margin-left: 300px; background: #0FF; height: 200px }
}
Display Scale 125% at 1119px width - no CSS media query applied, so CSS reverts to original
.test { border: 10px solid #f00; height: 10px; }
Possible Reason for the "glitch"
If the above is the case (or even if it isn't), I suspect your next question is why is it happening. Only the developers can answer that, but thinking logically we can come up with the reasoning below.
What are media queries meant to do?
First, we need to look at the purpose of media queries. According to the W3C CSS3 Media Queries recommendation:
The ‘width’ media feature describes the width of the targeted display area of the output device.
From this, we can assume they were intended for selecting the CSS to use depending on the media query that matches the screen/window size. Screen size can't have fractional pixels (e.g. 719.5px) and points between the whole pixels can only "exist" while the screen is being resized, and media queries are not intended to cover such temporary transitions.
OK, that's the why it isn't necessarily a "bug" and why it isn't always handled well in browsers, now...
What is causing this issue to happen during transitions?
If you have changed the scale, the browser has to recalculate the all the sizes to scale them up/down also. This "glitch" in the transition is most likely being caused by these calculations resulting in fractions of pixels. (If you haven't changed the scale, the same logic actually still applies)
It appears the browsers such as Chrome have been build to handle the recalculations/ size change in whole pixels, so the display will jump from the CSS applied by (e.g.) max-width:719px media query to the CSS for min-width:720px.
However other browsers such as Firefox don't seem to work like this and try to calculate the display based on the fractional pixels. This means there can be instances where the recalculated/changing size fall between e.g. max-width:719px nor min-width:720px.
In this case it seems to change the display to whatever CSS applies at that point - if there is another media query overlapping those sizes that would be applied, but more likely the original CSS is getting applied. So what you are seeing in that transition you describe is your CSS that exists outside of the media queries, e.g. if your CSS is written for mobile-first then you are seeing the CSS for mobile version of the site.
What can we do to "fix" it?
Aside from changing back the scale to 100% (which isn't a feasible option because you can't ask all your visitors to do that!) I don't know if there is a reliable solution.
- One option is to use decimal values in your media queries like you mentioned, e.g.
@media (min-width: 720px) and (max-width: 1119.999px) { /* CSS....*/ }
@media (max-width: 719.999px) { /* CSS....*/ }
- Another is to try is to make sure that you have suitable styling in your original CSS that will be applied at the "in-between" points, e.g. 719px - 720px.
这篇关于浏览器对@media查询的解释存在错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
