浏览器不同缩放级别的媒体查询

Posted 2023-03-06

【中文标题】浏览器不同缩放级别的媒体查询

【英文标题】：Media Queries for Different zoom Levels of Browser

【发布时间】：2014-04-09 01:15:24

【问题描述】：

我是使用 CSS3 媒体查询进行响应式设计的新手。我清楚地了解我们如何使用这些媒体查询来定位不同的设备，但我感到困惑的地方是 BROWSER ZOOMING!!。

For Eg：这是我正常的 body css 规则

#body 
    margin: 0 auto;
    width: 70%;
    clear: both;

当我想更改此 css 规则以针对宽度在 150 像素和 600 像素范围内的设备时，我添加此特定媒体查询。

@media only screen and (min-width:150px) and (max-width:600px)

#body 
    margin: 0 auto;
    width: 90%;
    clear: both;

问题：我使用的是谷歌浏览器，当我放大到大约 200% 时，这个特定的媒体查询就会发挥作用。

我如何知道要为不同的缩放级别编写哪些媒体查询，或者换一种说法，浏览器缩放级别和像素宽度之间的关系是什么。

【问题讨论】：

这是一篇关于这个主题的文章：blog.55minutes.com/2012/04/media-queries-and-browser-zoom

@BillyMoat 感谢您的评论。我阅读了整篇文章，但那里的上下文与我正在寻找的内容不同（在媒体查询中使用 px 的问题）。

@BillyMoat 需要一些东西，比如对于 200% 缩放级别，媒体查询中使用的最大宽度为 600 像素，对于 400% 缩放级别，最大宽度为 300 像素。一篇文章可能会告诉我们...对于 250% 的 chrome 缩放，请使用此媒体查询...对于 300% 的缩放，请使用此特定的媒体查询。

根据 [1]，Chrome 的可怕错误（参见 [2]）似乎在版本 27 [1] alastairc.ac/2012/01/zooming-bug-in-webkit [2] code.google.com/p/chromium/issues/…

之后得到解决

将媒体查询作为设备宽度而不是宽度。

【参考方案1】：

经过大量搜索。我找到了我的答案。

-

我们不需要通过使用媒体查询来明确定位浏览器缩放。当我们放大浏览器时，它表现为不同的设备。 例如：如果我们以 175% 级别缩放，则屏幕尺寸的像素宽度为 732 像素（您可以在mqtest.io [存档] 找到缩放和像素宽度之间的关系），它在 ipad 的 768 像素附近小型的。 因此，您可以使用通用媒体查询同时定位 Ipad mini 和浏览器缩放 (@175%) 即 @media 屏幕和 (min-width:732px) 因此，如果您使用媒体查询定位不同的设备（使网站响应不同的设备），那么您的浏览器缩放本身就会被考虑在内。

【讨论】：

这在移动浏览器上似乎不是真的。在桌面上，$(window).width() 会随着您的缩放而变化，因此您在缩放时会进行媒体查询。但在移动设备上，情况并非如此，至少在 ios 上是这样。

如果您在 chrome 中默认缩放为 125%，则媒体 q 无法正常工作。

@SuperUberDuper...媒体查询不能正常工作是什么意思？ Afaik，没有定义黑白缩放级别和媒体查询的关系。我们可以肯定的是，媒体查询会因不同的缩放级别而发生变化（目标设备）。

@SuperUberDuper 如果您在查看正在设计的页面的缩放版本时基于断点，通常会出现问题。如果在 100% 时测量所有断点，即使不是所有浏览器似乎都会在不同的 PX 测量处触发断点，但大多数（如果不是所有）浏览器都会按预期运行。在内部，它们可能已经补偿了其他变化，例如内联元素的高度等。

我遇到了同样的问题，但正如您正确地说的那样，实际问题出在其他地方。如果你愿意，你可以这样做@media (-webkit-min-device-pixel-ratio: 2), /* Webkit */ (min-resolution: 192dpi) /* Everyone else */ ... ，其中 192 = 96 x 2。但是我不确定这实际上有多大用处，因为保持媒体查询的一致性可能更好，并且只针对最小宽度和倍数跨度>