Способы определения ширины браузера в JavaScript и странный опыт с браузером Samsung

Сегодня я столкнулся с очень неловким опытом. Как обычно, я использовал window.innerWidth для измерения ширины браузера и написал код так, чтобы isMobile = true срабатывало, если ширина меньше 768px. Я тщательно протестировал. Проверил на различных устройствах, таких как iPhone, Galaxy, через Safari, Chrome и Brave, и не обнаружил проблем.

Но…

Друг вдруг сообщил, что мое веб-приложение выглядит странно в браузере Samsung на Galaxy. "Неужели?" - подумал я, но, протестировав сам, убедился, что в браузере Samsung действительно возникла странная ситуация, когда window.innerWidth < 768 возвращает false даже в мобильной среде.

Это было непонимаемо. Только в браузере Samsung это было странно, но также я обнаружил, что в режиме разработчика Chrome и Firefox на ПК значение также возвращает false.

Разные попытки решения проблемы

Я немедленно протестировал другие методы.

1. window.innerWidth

const isMobile = window.innerWidth < 768;

✅ Работает нормально в обычных браузерах
❌ Возвращает false в браузере Samsung и режиме разработчика на ПК (неудача)

2. Добавил document.documentElement.clientWidth

const isMobile = (window.innerWidth || document.documentElement.clientWidth) < 768;

✅ Логически более безопасный код
❌ По-прежнему false в браузере Samsung и в режиме разработчика (неудача)

3. Использование window.matchMedia('(max-width: 767px)')

const isMobile = window.matchMedia('(max-width: 767px)').matches;

✅ Работает нормально во всех браузерах! (успех 🎉)

Исходя из этого результата, я пришел к выводу.
В будущем для определения мобильной среды нужно использовать window.matchMedia.

Почему это произошло?

Честно говоря, трудно точно узнать причину без просмотра внутреннего кода браузера. Но мы можем сделать некоторые предположения.

1. Различия в способе рендеринга браузера Samsung
   Браузер Samsung основан на Chromium, но имеет различные пользовательские оптимизации. В этом процессе значение window.innerWidth может работать иначе, чем в обычных мобильных браузерах.

2. Причина, по которой это произошло в режиме разработчика Chrome и Firefox на ПК
   Когда активируешь функцию "Просмотр мобильного экрана" в режиме разработчика, браузер не только изменяет размер экрана, но и меняет множество внутренних настроек. Но не все среды полностью эмулируют реальные мобильные устройства. Это может быть причиной, по которой значение window.innerWidth работает иначе в режиме разработчика, чем на реальных устройствах.

3. Различия в учете полосы прокрутки
   window.innerWidth включает ширину вьюпорта, в то время как document.documentElement.clientWidth возвращает реальную ширину контента без полосы прокрутки.
   Может быть, браузер Samsung обрабатывает полосу прокрутки иначе внутри? Тем не менее, эта гипотеза не могла объяснить все явления.

В заключение…

В будущем для проверки мобильной среды используйте matchMedia

Из этого опыта я понял, что такие методы, как window.innerWidth, не надежны.
Для оценки мобильной среды безопаснее использовать matchMedia, как показано ниже:

const isMobile = window.matchMedia('(max-width: 767px)').matches;

📌 Используя этот метод
✅ Работает нормально во всех браузерах.
✅ Можно получить согласованные результаты в режиме разработчика.
✅ Работает без проблем даже в таких специфических средах, как браузер Samsung.

Иногда встречи с такими неожиданными багами — это процесс становления хорошим разработчиком. В любом случае, сегодня благодаря браузеру Samsung я понял необходимость использования matchMedia. 😆