Безголовые браузеры не учитывают порт просмотра в запросах matchMedia

Question

Я какое-то время играл с phantomJS и столкнулся с проблемами при использовании его на веб-сайтах, которые используют запросы matchMedia для различения типов устройств.

Некоторое время я думал, что это была фантомная проблема, но это происходит с другими безголовыми браузерами, такими как slimerJS и Headless Chrome.

Проблема в том, что запросы matchMedia не учитывают порт представления на HB.

Как пример, следующие шаги воспроизводят проблему в этих HB:

1. Настройка порта мобильного просмотра (например: 736x414).
2. Откройте https://josebrandao13.github.io/
3. Сделай скриншот.

Скриншот

Результат всегда: "Я планшет". Это означает, что ширина и высота больше, чем 768 пикселей, когда это не так.

Если вы откроете этот веб-сайт с помощью инструментов разработчика Chrome или Firefox и переключитесь между телефоном и планшетным ПК, matchMedia будет работать так, как ожидается. Кроме того, если я открою его на моем мобильном телефоне, то в Chrome все будет в порядке.

Есть ли известная проблема с безголовыми браузерами и matchMedia?

Answer 1

Спустя некоторое время, пытаясь справиться с этой проблемой, я нашел способ эмулировать мобильное устройство с помощью Headless Chrome, в том числе сопоставлять медиазапросы. Для тех, кто заинтересован:

https://github.com/josebrandao13/headlessChromeMatchMedia