媒体查询以错误的宽度触发 [英] Media Queries firing at wrong width

问题描述

我正在构建一个响应式页面，媒体查询以错误的宽度大小触发。我使用Chrome。

  @media屏幕和（最大宽度：1200px）{
 .logo-pic { 
 display：none; 
 
 
  

例如，这条规则的作用就是引发错误尺寸。这条规则在1320px而不是1200px激发。
我有适当的html元标记。

 < meta name =viewport这是一个很好的例子， content =width = device-width，initial-scale = 1> 
  

我检查了之前创建的响应式网站，并且这些断点正确触发。我在不同的网站上测试过浏览器，媒体查询也不错。

我在堆栈溢出中发现了一个类似的问题，但它没有得到答复。

媒体查询错误值的断点

不确定问题是什么？

解决方案

这种情况发生的常见原因是，如果您将浏览器窗口缩放为100％ 。在浏览器中，选择下拉菜单'查看'并确保它被设置为100％。如果你放大或缩小，它将不适当地触发媒体查询。

不要担心会感到尴尬。它可能已经发生，或将会发生在每个人身上......但只有一次。为了避免这个问题，所有的人都在一起，您应该考虑使用相对单位（ em 或 rem 而不是）来定义媒体查询。 px ）。

---

您也可以将页面上的浏览器缩放级别设置为100％使用JavaScript加载。

  document.body.style.webkitTransform ='scale（1）'; 
 document.body.style.msTransform ='scale（100）'; 
 document.body.style.transform ='scale（1）'; 
 document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI; 
  

I am building a responsive page and the media queries are firing at the wrong width size. I am using Chrome.

@media screen and (max-width: 1200px) {
 .logo-pic {
    display: none;
}
}

For example, this rule works it just fires at wrong size. This rule fires at 1320px and not 1200px. I have the meta tag for html in place. It seems to be firing the media query 100 or so pixel wider than it normall should.

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

I checked the previous responsive site I made and those breakpoints are firing correctly. I've tested the browser on different websites and the media queries are fine as well.

I found a similiar question on stack overflow but it went unanswered.

Media Queries breakpoint at wrong value

Not sure what the problem is?

解决方案

A common reason this happens is if you have zoomed the browser window to a size other than 100%. In your browser, select the drop-down menu 'View' and make sure it is set to 100%. If you are zoomed in or out, it will trigger media-queries inappropriately.

And don't worry about feeling embarrassed. It has probably happened, or will happen to everyone.. but only once.

---

In order to avoid this issue all together, you should considering defining your media queries using a relative units (em or rem rather than px).

---

You can also enforce setting the browser zoom level to 100% on page load using javascript.

document.body.style.webkitTransform =  'scale(1)';
document.body.style.msTransform =   'scale(100)';
document.body.style.transform = 'scale(1)';
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;

这篇关于媒体查询以错误的宽度触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！