Match Media queries not honoring viewPort width and height
#198 opened on Aug 7, 2017
Description
When using chromeless in webpages that use matchMedia queries the viewPort is not respected. For instance, if I use this mobile UA and VP the website will think I'm using a tablet when should think I'm using a phone:
Setting a mobile viewPort and userAgent:
const screenshot = await chromeless
.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B137 Safari/601.1')
.setViewport({width: 414, height: 736, scale: 1})
After opening a given web page, always opens in tablet version instead of phone. The reason was this:
matchMedia('only screen and (max-device-width: 767px), only screen and (max-device-height: 767px)').matches;
This query should return true and returns false, since my view port is 414x736. When I open this normally with chrome this query returns true as it should.
Strange is that with chromeless I use Chrome(with the same version) but with no Graphic Interface and the behaviour is different.
An additional information is that, the 'tablet' query returns true on chromeless and false on chrome:
matchMedia('only screen and (min-device-width: 768px) and (min-device-height: 768px)').matches;
I have watched the web page dimensions at run time and they match what I have set on the viewPort but for some reason matchMedia doesn't agree.
Is there any known problem with matchMedia ? I have been searching for a while and didn't find any information about this.
Thanks in advance.