Медиафункция CSS `device-width`
Базовый уровень Ограниченная доступность
Эта функция не входит в базовый уровень, поскольку она не работает в некоторых наиболее широко используемых браузерах.
Устарело: Эта функция больше не рекомендуется. Хотя некоторые браузеры всё ещё могут её поддерживать, она уже могла быть удалена из соответствующих веб-стандартов, её могут исключать или сохранять только для обеспечения совместимости. Не используйте её и по возможности обновите существующий код; при принятии решения воспользуйтесь таблицей совместимости внизу этой страницы. Учтите, что эта функция может перестать работать в любой момент.
Примечание: Чтобы узнать ширину области просмотра, разработчикам следует использовать вместо неё медиафункцию width.
Медиафункцию device-width CSS можно использовать для проверки ширины поверхности рендеринга устройства вывода.
Синтаксис
Функция device-width задаётся значением <length>. Это функция диапазона, поэтому для проверки минимального и максимального значений соответственно можно также использовать варианты с префиксами min-device-width и max-device-width.
Примеры
Применение специальной таблицы стилей для устройств шириной менее 800 пикселей
<link rel="stylesheet" media="screen and (max-device-width: 799px)" href="https://cdn.example.com/narrow-styles.css" />
Спецификации
| Спецификация |
|---|
| Media Queries Level 4 # device-width |
Совместимость с браузерами
| Компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome для Android | Firefox для Android | Opera для Android | Safari на iOS | Samsung Internet | WebView для Android | WebView на iOS | |
device-width |
1 |
12 |
2 |
10 |
3 |
18 |
4 |
10.1 |
1 |
1.0 |
4.4 |
1 |
См. также
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/device-width
