Headless-Browser, die View-Port in MatchMedia-Abfragen nicht respektieren

Question

Ich habe mit phantomJS eine Weile gespielt und ich stieß auf Probleme bei der Verwendung in Websites, die MatchMedia-Abfragen verwenden, um Gerätetypen zu unterscheiden.

Für eine Weile dachte ich, das wäre ein Phantom-Problem, aber es passiert mit anderen kopflosen Browsern wie slimerJS und Headless Chrome.

Das Problem besteht darin, dass MatchMedia-Abfragen den Ansichtsport auf HB nicht berücksichtigen.

Als Probe, reproduzieren die folgenden Schritte das Problem in dieser HB:

1. eine mobile Ansicht Port-Einstellung (ex: 736x414).
2. Öffnen https://josebrandao13.github.io/
3. Machen Sie einen Screenshot.

screenshot

Ergebnis ist immer: "Ich bin eine Tablette". Das bedeutet, dass Breite und Höhe größer als 768 px sind, wenn dies nicht der Fall ist.

Wenn Sie diese Website mit Chrome- oder Firefox-Entwicklungstools öffnen und zwischen Telefon- und Tabletgeräten wechseln, verhält sich MatchMedia wie erwartet. Auch wenn ich es auf meinem Handy Chrome öffne ist alles ok.

Gibt es ein bekanntes Problem mit Headless-Browsern und MatchMedia?

Answer 1

Nach einer Zeit mit diesem Problem zu kämpfen, fand ich eine Möglichkeit, ein mobiles Gerät mit Headless Chrome zu emulieren, einschließlich Match-Media-Abfragen. Für Interessierte:

https://github.com/josebrandao13/headlessChromeMatchMedia