1

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

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

问题是 matchMedia 查询不支持 HB 上的视口。

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

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

截屏

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

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

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

4

1 回答 1

1

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

https://github.com/josebrandao13/headlessChromeMatchMedia

于 2017-08-14T15:18:32.463 回答