CODEWITHSUNDEEP
phantomjsheadless-browserslimerjsgoogle-chrome-headlessmatchmedia
Jose Brandao
Jose Brandao

Reputation: 111

Headless browsers not honouring view port in matchMedia queries

I have been playing with phantomJS for a while and I came across problems when using it in websites that use matchMedia queries to distinguish device types.

For a while I thought that was a phantom problem but it is happening with other headless browsers like slimerJS and Headless Chrome.

The problem is that matchMedia queries are not honouring the view port on HB.

As sample, the following steps reproduce the problem in these HB:

  1. Setting a mobile view port(ex: 736x414).
  2. Open https://josebrandao13.github.io/
  3. Take a screenshot.

screenshot

Result is always: "I'm a tablet". Meaning that width and height are greater than 768px when they are not.

If you open this website on Chrome or Firefox dev tools and switch between phone and tablet devices, matchMedia behaves as expected. Also if I open it on my mobile phone chrome's everything is ok.

Is there any known problem with headless browsers and matchMedia ?

Upvotes: 1

Views: 363

Answers (1)

Jose Brandao
Jose Brandao

Reputation: 111

After a time struggling with this problem I found a way to emulate a mobile device with Headless Chrome, including match media queries. For those interested:

https://github.com/josebrandao13/headlessChromeMatchMedia

Upvotes: 1

Related Questions