如何在 CSS 中模拟媒体查询?

Posted

技术标签:

【中文标题】如何在 CSS 中模拟媒体查询?【英文标题】:How to Mock Media Query in CSS? 【发布时间】:2013-05-07 12:33:50 【问题描述】:

由于移动应用程序的浏览器宽度非常小,因此几乎不可能阅读开发者工具(使用 Chrome)。出于调试目的,这是玩弄网站的 html 和 CSS 的最不实用的应用程序。

我该如何处理这种“问题”?有没有办法让浏览器相信宽度仍然是移动应用程序的宽度,即使宽度要高得多?

【问题讨论】:

【参考方案1】:

我解决了我的问题如下:调出开发者工具栏,点击左下角的按钮。现在弹出窗口。就这些。

【讨论】:

【参考方案2】:

在 Chrome 开发者工具中,您可以将用户代理覆盖到移动/平板设备,如此处所述。 http://googlesystem.blogspot.com/2011/12/changing-user-agent-new-google-chrome.html

【讨论】:

【参考方案3】:

您可以做的是取消停靠开发人员工具,以便将其放在与您正在检查的页面不同的窗口中

【讨论】:

以上是关于如何在 CSS 中模拟媒体查询?的主要内容,如果未能解决你的问题,请参考以下文章

CSS 媒体查询在移动设备上不起作用

如何在 Chrome 中模拟偏好颜色方案媒体查询?

CSS 媒体查询和移动

如何在媒体查询 CSS 中禁用 jQuery 属性

如何在浏览器中模拟设备宽度和方向来测试媒体查询?

如何在 Firefox 中禁用媒体查询支持?