私はしばらくphantomJSで遊んでいましたが、matchMediaクエリを使ってデバイスタイプを区別するウェブサイトで問題を見つけました。ヘッドレスブラウザがmatchMediaクエリのビューポートを歓迎していません
私はそれが想像上の問題だと思っていましたが、それはslimerJSやヘッドレスクロムのような他のヘッドレスブラウザで起こっています。
問題は、matchMediaクエリがHBのビューポートを尊重していないことです。試料として
、次の手順では、これらのHBで問題を再現:
- モバイルビューポート(例:736x414)を設定します。
- 公開https://josebrandao13.github.io/
- スクリーンショットを撮る。
結果は常にある: "私はタブレットです"。幅と高さが768pxより大きくないことを意味します。
このウェブサイトをChromeまたはFirefoxの開発ツールで開き、電話機とタブレットデバイスを切り替えると、matchMediaは正常に動作します。私の携帯電話でそれを開くとまた、すべてのクロムの大丈夫です。
ヘッドレスブラウザとmatchMediaには既知の問題はありますか?