我正在使用带有响应主题的WordPress。当我在移动的设备上显示内容时，主题在普通浏览器中可以正常显示。
当切换到浏览器的“桌面模式”时，响应主题的行为有点奇怪。我猜这是由于使用的屏幕大小。有没有办法显示使用的CSS媒体查询？
当CSS说media min-width: 1024px时，我可以在哪里看到CSS使用的屏幕大小吗？或者是否存在一个简单的页面来测试它？或者更好：如何检测浏览器是否请求网站的“桌面版本”并将其用于CSS？
我在谷歌上搜索，但没有找到任何帮助如何检测它，但没有想出有用的提示。
6条答案
按热度按时间hrysbysz1#
window.innerWidth就是你要找的。把它插入你的开发控制台，你会得到精确的像素宽度。iovurdzv2#
您可以使用浏览器中开发者工具的inspector-tab来查看元素当前使用的css规则。
你也可以在开发者工具的帮助下查看和设置浏览器 windows 的大小。大多数浏览器都有一组预设来模拟特定的移动屏幕。这对测试和调试响应规则/样式非常有帮助。
ep6jt1vc3#
在dev-tool的样式面板中你可以搜索它。你也可以使用show-hide media-queries选项。
wbgh16ku4#
有没有办法显示使用过的CSS媒体查询？
我想你要找的东西可以在浏览器的开发工具中找到。在下面的截图中，我试着调整这个完全相同的页面，并使用Chrome开发工具检查它。在
elements标签和样式下，你可以看到你的媒体查询是否被触发。请看下面的截图...我能在哪里看到CSS使用的屏幕尺寸吗？
您的浏览器开发工具很可能会有显示浏览器窗口当前大小的功能。在Google Chrome的情况下，您可以在调整大小时在屏幕右上角看到浏览器的当前大小。请注意，只有在开发工具当前打开且您正在调整窗口大小时，才会显示该大小。请参见下面的截图...
附言
附加：如果你想有更多像javascript的解决方案，你可能想看看这个库。https://github.com/ryanve/actual根据描述，它“通过JavaScript确定实际的CSS媒体查询断点”。请注意，我个人没有使用过这个库，所以我不能说它真的工作。
您可能还想查看这篇讨论如何使用Javascript -http://zerosixthree.se/detecting-media-queries-with-javascript/检测媒体查询的文章
希望这有帮助！：D
ftf50wuq5#
最简单的解决方案是使用“Window Resizer”（2. 6. 4）chrome扩展，它将给予你一个弹出窗口，允许你将视口大小调整为任何标准大小（xs，sm，md，lg等）
unftdfkk6#
在您的计算机浏览器中打开网站，并减少浏览器的大小，如这个例子，并右键单击页面的中心，然后单击检查，那么您将能够看到网站的所有CSS风格时，网站很小