html - max-width CSS 媒体查询如何适应缩放？

Question

如果页面非常窄，我会使用 CSS 媒体查询来调整页面的外观。在我的简化示例中，如果页面宽度小于 300 像素，我会将背景设为蓝色。

@media all and (max-width: 300px) {
    body{ background-color:blue;}
}

我最近发现，如果用户缩放(Ctrl+滚轮或在 Chrome Spanner 上>缩放)，最大宽度仍将以 300 个实际像素启动，而不是 300 个缩放像素。这可能会破坏布局更复杂的网站。最大宽度媒体查询有什么方法可以处理使用缩放浏览器的用户吗？

Answer 1

我已经试验过了，你似乎可以使用媒体查询进行缩放，但是在 Webkit 浏览器中你必须定义视口(viewport)。