如何显示浏览器的屏幕宽度？

Question

我正在使用具有响应主题的Wordpress。当我在移动设备上显示内容时，可以使用常规浏览器正确显示主题。

当切换到浏览器的“桌面模式”时，响应主题的行为有点奇怪。我猜这是由于使用了屏幕尺寸。有没有办法显示使用过的CSS媒体查询？

就CSS何时说media min-width: 1024px而言，我可以看到CSS使用的屏幕尺寸的地方吗？还是有一个简单的页面可以在其中进行测试？ 甚至更好：如何检测浏览器是否请求网站的“桌面版本”并将其用于CSS？

我用Google搜索，但没有找到如何检测它的帮助，但没有提供有用的提示。

Answer 1

window.innerWidth是您要寻找的。将其插入开发控制台后，按像素缩放比例即可获得确切的宽度。

Answer 2

您可以使用浏览器内开发人员工具中的inspector-tab来查看元素当前使用的css-rules。

您还可以在开发人员工具的帮助下查看并设置浏览器视口的大小。大多数浏览器都有一组预设来模拟特定的移动屏幕。这对于测试和调试响应式规则/样式非常有帮助。

Answer 3

在开发工具的样式面板中，您可以搜索它。 您还可以使用显示隐藏媒体查询选项。

Answer 4

  

是否可以显示使用过的CSS媒体查询？

我认为您正在寻找的内容可以在浏览器的开发工具中找到。在下面的屏幕截图中，我尝试调整了该页面的大小，并使用Chrome开发者工具对其进行了检查。在elements标签和样式下，您可以查看是否触发了媒体查询。请查看下面的屏幕截图...

  

我可以在某处看到正在使用屏幕尺寸CSS的地方吗？

您的浏览器开发工具很可能会具有显示浏览器窗口当前大小的功能。如果是Google Chrome浏览器，则在调整大小时，您可以在屏幕的右上角看到浏览器的当前大小。请注意，只有在当前打开开发工具并且正在调整窗口大小时，才会显示大小。请查看下面的屏幕截图...

---

P.S。

附加： 如果您想拥有更多类似javascript的解决方案，则可能需要查看该库。 https://github.com/ryanve/actual 根据描述，它“通过JavaScript确定实际CSS媒体查询断点”。请注意，我本人并没有亲自使用该库，所以我不能真正说它可以工作。

您可能还想查看这篇讨论如何使用Javascript检测媒体查询的文章-http://zerosixthree.se/detecting-media-queries-with-javascript/

希望这会有所帮助！ ：D

Answer 5

使用此示例在计算机浏览器中打开网站并减小浏览器的大小，然后右键单击页面中心，然后单击“检查”，当网站较小时，您将能够看到网站的所有CSS样式