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

Question

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

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

问题是matchMedia查询没有遵守HB上的视口。

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

1. 设置移动视图端口（例如：736x414）。
2. 打开https://josebrandao13.github.io/
3. 截图。

screenshot

结果总是：“我是平板电脑”。这意味着宽度和高度不大于768px。

如果您在Chrome或Firefox开发工具上打开此网站并在手机和平​​板电脑设备之间切换，则matchMedia会按预期运行。此外，如果我在手机上打开它，一切都还可以。

无头浏览器和matchMedia是否有任何已知问题？

Answer 1

经过一段时间的努力解决这个问题后，我找到了一种模拟使用Headless Chrome的移动设备的方法，包括匹配媒体查询。 对于那些感兴趣的人：

https://github.com/josebrandao13/headlessChromeMatchMedia