max-width CSS 媒体查询如何适应缩放？
如果页面非常窄，我会使用 CSS 媒体查询来调整页面的外观。在我的简化示例中，如果页面宽度小于 300 像素，我会将背景设为蓝色。
@media all and (max-width: 300px) {
body{ background-color:blue;}
}
我最近发现，如果用户缩放（Ctrl+滚轮或 Chrome 扳手>缩放），最大宽度仍将达到 300 个实际像素，而不是 300 个缩放像素。这可能会破坏布局更复杂的网站。最大宽度媒体查询有什么方法可以处理使用缩放浏览器的用户吗？
I'm using a CSS Media Query to adjust the look of my page if it is very narrow. In my simplified example, if the page is less than 300px wide, I'll make the background blue.
@media all and (max-width: 300px) {
body{ background-color:blue;}
}
I recently discovered that if the user zooms (Ctrl+Scrollwheel or on Chrome Wrench>Zoom) that the max-width will still kick in at 300 actual pixels, not 300 zoomed pixels. This can break sites with more sophisticated layouts. Is there any way for the max-width media query to handle users with zoomed browsers?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我已经尝试过，似乎您可以使用媒体查询进行缩放，但是在 Webkit 浏览器中您必须定义视口。
I've experimented around and it seems that you can use media queries for a zoom, however in a Webkit browser you must define the viewport.