无头浏览器不支持 matchMedia 查询中的视口

Question

我已经玩phantomJS一段时间了，在使用matchMedia查询来区分设备类型的网站中使用它时遇到了问题。

有一段时间，我认为这是一个幻影问题，但它正在发生在其他无头浏览器上，如slimerJS和Headless Chrome。

问题是匹配媒体查询不支持 HB 上的视口。

作为示例，以下步骤在这些 HB 中重现问题：

1. 设置移动视口(例如：736x414(。
2. 开放式 https://josebrandao13.github.io/
3. 截取屏幕截图。

截图

结果始终是："我是平板电脑"。这意味着宽度和高度大于 768px，而实际上并非如此。

如果您在 Chrome 或 Firefox 开发工具上打开此网站并在手机和平板电脑设备之间切换，matchMedia 的行为将按预期运行。另外，如果我在手机上打开它，一切都很好。

无头浏览器和匹配媒体是否存在任何已知问题？

Answer 1

在与这个问题斗争一段时间后，我找到了一种使用无头Chrome模拟移动设备的方法，包括匹配媒体查询。 对于那些感兴趣的人：

https://github.com/josebrandao13/headlessChromeMatchMedia