Почему в Яндекс Браузере отображается планшетная версия вместо десктопной

Ситуация, когда на широком экране (1920×1080 и выше) загружается мобильная или планшетная версия сайта, часто встречается у веб-разработчиков. Особенно остро проблема проявляется в Яндекс Браузере под Windows 11 на ноутбуках с высоким DPI (например, 2K-экраны). Разберём, почему это происходит и как исправить.

Причина: масштабирование браузера и системы

Основная ошибка - несовпадение реального логического разрешения экрана и физического. Даже если в настройках Windows указано 100%, браузер может использовать собственный коэффициент масштабирования. В Яндекс Браузере это часто связано с настройками масштаба страницы (по умолчанию может быть 110% или 125%), что приводит к увеличению всех элементов на ~20% и срабатыванию медиазапросов для планшетных разрешений.

Как это влияет на медиазапросы

При увеличении масштаба браузер эмулирует меньшее окно. Например, при физическом разрешении 1920×1080 и масштабе 125% браузер считает, что ширина окна составляет 1536 пикселей. Если в CSS медиазапрос для десктопа начинается с min-width: 1600px, то условие не выполняется, и подключается планшетный стиль.

Проверка и диагностика

Чтобы убедиться в проблеме:

• Откройте инструменты разработчика (F12) и посмотрите вкладку Console - там будет значение window.innerWidth.
• Сравните его с физическим разрешением экрана.
• Проверьте настройки масштаба в самом Яндекс Браузере (три полоски → Масштаб).

Решение проблемы

1. Исправление медиазапросов

Используйте относительные единицы (rem, em) и избегайте жёстких привязок к пикселям. Для десктопной версии задавайте точку перелома min-width: 1440px или min-width: 1366px - это учтёт типичное масштабирование 110-125%.

2. Учёт DPI в CSS

Добавьте метатег <meta name="viewport" content="width=device-width, initial-scale=1.0"> и используйте min-resolution: 1.5dppx для ретиновых дисплеев. Это позволит браузеру правильно интерпретировать физические пиксели.

3. Настройка браузера клиента

Попросите пользователя сбросить масштаб в Яндекс Браузере до 100% (через меню или сочетание Ctrl+0), а также проверить системный масштаб в Windows: Параметры → Система → Дисплей → Масштаб 100%.

Почему в VirtualBox проблема не проявляется

Виртуальная машина обычно эмулирует стандартный монитор с DPI 96, без масштабирования высокого разрешения. На реальном ноутбуке с 2K-экраном Windows может автоматически установить масштаб 150% или 175%, что и вызывает сбой.

Заключение

Чтобы сайт корректно отображался на всех устройствах, тестируйте вёрстку на реальных ноутбуках с высоким DPI и в разных браузерах. Учитывайте системное и браузерное масштабирование при настройке медиазапросов. Если проблема остаётся, используйте JavaScript для определения реального размера окна и принудительной загрузки десктопной версии.