媒体查询触发宽度错误

我正在建立一个响应页面和媒体查询是在错误的宽度大小发射。我正在使用 Chrome。

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

例如，这个规则只是在错误的大小下触发，这个规则触发的大小是1320px 而不是1200px。 我已经为 html 准备好了 meta 标记。它似乎是发射媒体查询100像素左右比正常应该。

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

我检查了之前创建的响应站点，这些断点正确地触发了。我已经在不同的网站上测试了浏览器，媒体查询也很好。

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

媒体查询断点值错误

不知道有什么问题吗？

37647 次浏览
小开
最佳答案

出现这种情况的一个常见原因是，您已将浏览器窗口缩放到了100% 以外的大小。在浏览器中，选择下拉菜单“查看”，并确保它设置为100% 。如果放大或缩小，将不适当地触发媒体查询。

不要担心感到尴尬。它可能已经发生，或将发生在每个人身上... ... 但只有一次。

为了避免所有这些问题，您应该考虑使用相对单元(em或 rem而不是 px)定义媒体查询。

您还可以使用 javascript 在页面加载时强制将浏览器缩放级别设置为100% 。

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;
小开

是否有 iframe (或者 modal 或者更小的窗口)在媒体查询中加载相同的 CSS 表格？如果是这种情况，那就是一个缓存问题，您需要用一个哑参数链接 CSS 文件，比如:

<link href="myCss.css?iframe=1" />

为了将 css 文件作为一个新文件加载，而不是采用缓存的版本... ... 我希望我说得够清楚:)

小开

只是一个简短的补充，以防止其他人进一步搜索，即使答案在这里给出。

我的变焦已经设置为100% ，但问题仍然存在。 如果您也有同样的体验，那么答案很简单: 将您的缩放设置为90% ，然后返回到100% ，就这样，在您想要的宽度上设置断点。

小开

看看你的单位: rem，em，px。

我只是有这个问题，这是因为我的基本字体大小是10px，我把 max_width: 102.4rem在媒体查询，但它是在1600px 左右激活，而不是预期的1024px。

它仍然激活在1600px 的矿与 102.4em，但它的工作原理，当我使用 1024px。

这里有一篇文章谈到了我所暗示的一切:

Https://zellwk.com/blog/media-query-units/

我错过了首先投票的答案，因为我经历了使用 rem而不是 px的问题。显然，问题的根源似乎是单位。

小开

经过一个小时的沮丧之后，我终于写到了这个帖子，最后我意识到我不小心使用了 min-height 而不是 min-width:

@media screen and (min-height: $sm) { }

而不是..。

@media screen and (min-width: $sm) { }

只是提醒快速检查它，如果你有同样的问题作为我的 掌心，它的晚了。

小开

又多了一个。经过一个小时的调试，我意识到我已经编写了多个媒体查询，因为 css 文件是从上到下执行的，所以我重写了之前的媒体查询逻辑。 例如:

@media (max-width: 700px) {
.some-class { background-color: red; }
};


// This will override the above styling (assuming max-width logic is true)
@media (max-width: 800px) {
.some-class { background-color: yellow; }
};
小开

我在 Chrome 中的媒体查询也有一些问题。

我一切换设备工具栏，缩放就出错了

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

解决了这个问题。

小开

这些都没有解决我的问题，但是我的问题是，为什么断点出现在1000px，这让我目瞪口呆，因为我使用的是响应式库，而且我在某个 JSX 组件中仍然设置了断点！

小开

加上我的解决方案，因为没有一个答案能解决我的问题:

我将滚动条的宽度设置为10px (firefox 中是 thin) ，窗口的计算宽度没有考虑滚动条的增加宽度，因此断点比指定的 @media查询要薄10px。

为了解决这个问题，我简单地将10px (滚动条的宽度)添加到查询中，转向:

@media (max-width: 600px)

变成:

@media (max-width: 610px)

编程愉快！

小开

我最近经历过这个问题，我发现是滚动条导致了这个问题。我找到了与这个问题相关的答案:

Https://css-tricks.com/forums/topic/best-media-query-excluding-scroll-solution/

提出了两种解决办法:

html {
overflow: hidden;
height: 100%;
}


body {
height: 100%;
overflow-y: scroll;
position: relative;
}

正如文章中提到的那样，这个答案有点古怪，它给您留下了一个永久滚动条，即使所有内容都在屏幕上。所以，我不是很喜欢。

您也可以使用 JS 解决方案来解决这个问题。本文提供了一个处理这个问题的 git repo 链接。

最后，文章中没有提到的是，如果不需要精确的滚动条，你可以在媒体规则中添加更多的像素来适应滚动条。如果是这样，那么 JS 解决方案是最好的选择。

小开

问题是 Chrome 将始终包含滚动条(与 document.body.clientWidth或 jQuery 的 $(window).width()相反，它的作用与 window.innerWidth完全一样)。

您只需要构建媒体查询，而不是像素级的，但是在 javascript 逻辑中始终保持与 window.innerWidth一致。否则你就会陷入人满为患的困境，你不会想去那个兔子洞的。


提交答案