Если вы хоть раз задавали в CSS медиазапрос вроде:
...а потом ломали голову, почему он не работает, несмотря на то что "у пользователя экран 1366×768", — вы не одиноки. Эта ошибка чрезвычайно распространена, и связано это с неправильным пониманием того, как работает viewport в браузере. В этой статье объясню, почему так происходит и как избежать подобных ошибок в будущем.
🧩 CSS-пиксели ≠ физические пиксели
Первое, что стоит понять: медиазапросы опираются не на физическое разрешение экрана, а на ширину viewport’а в CSS-пикселях. Например, когда вы пишете:
…вы говорите: "Применяй эти стили, если ширина окна браузера (в CSS-пикселях) меньше или равна 1366". Но внутреннее окно браузера практически всегда меньше физического разрешения экрана.
👀 Почему?
- У браузера есть интерфейс: вкладки, панели, отступы.
- Есть вертикальная полоса прокрутки (scrollbar).
- Пользователь может включить масштабирование (Zoom).
- Операционная система может использовать масштаб (DPI 125%, 150% и т.п.).
В итоге, на экране 1366×768 реальный window.innerWidth может быть, например, 1336px или даже меньше. Поэтому ваш запрос @media (max-width: 1366px) просто не срабатывает.
🔧 Как проверить реальную ширину viewport
Откройте DevTools (F12), перейдите во вкладку Console и введите:
Это и есть та ширина, на которую нужно ориентироваться при написании медиазапросов. Не screen.width, не outerWidth, а именно innerWidth.
🔬 Пример из практики
👉 Допустим, вы хотите изменить верстку для экранов ноутбуков. По привычке вы ставите медиазапрос на 1366px, ведь это популярное разрешение. Но вы не учитываете, что:
- В Chrome при обычных настройках window.innerWidth = 1340–1350px на таких экранах.
- В Firefox – ещё меньше.
- В macOS с Retina-дисплеем всё ещё сложнее: CSS-пиксели масштабируются.
📉 В результате: ваш «адаптив» не работает именно на тех устройствах, ради которых вы его писали.
✅ Как делать правильно
Вот несколько советов, проверенных на практике:
- Ориентируйтесь на реальные размеры innerWidth. Не гадайте — измерьте.
- Используйте округлённые значения, не "пограничные".
Вместо @media (max-width: 1366px) — лучше использовать:
или даже
- Это безопаснее и надёжнее.
- Тестируйте не только в DevTools, но и на реальных устройствах с разными масштабами интерфейса.
- Проверяйте значения в JavaScript через window.innerWidth и matchMedia() для диагностики.
🧠 Немного технической теории
- screen.width — это физическая ширина дисплея.
- window.innerWidth — то, что реально доступно в браузере для отображения контента.
- document.documentElement.clientWidth — чуть менее точное значение, но тоже полезно.
- Zoom в браузере меняет масштаб отображения, но не физические пиксели — именно это ломает точные расчёты.
💡 Вывод
Медиазапросы — мощный инструмент, но легко попасть в ловушку, если полагаться на "точные" разрешения экранов, не учитывая, что на практике viewport всегда меньше. Пишите адаптив "с запасом", тестируйте на реальных устройствах и не бойтесь отойти от "магических" чисел вроде 1366px — они больше вредят, чем помогают.
📌 Золотое правило: медиазапрос — это не про экран, это про пространство внутри браузера.