Медиафункция CSS `device-aspect-ratio`

Baseline Ограниченная доступность

Эта функция не входит в Baseline, поскольку не работает в некоторых самых популярных браузерах.

Устарела: Эта функция больше не рекомендуется. Хотя некоторые браузеры всё ещё могут её поддерживать, она могла быть уже удалена из соответствующих веб-стандартов, находиться в процессе исключения или сохраняться только для обеспечения совместимости. Не используйте её и по возможности обновите существующий код; чтобы принять решение, ознакомьтесь с таблицей совместимости внизу этой страницы. Учтите, что эта функция может перестать работать в любой момент.

Примечание: Чтобы проверить соотношение сторон области просмотра, разработчикам следует использовать вместо неё медиафункцию aspect-ratio.

device-aspect-ratio CSS медиафункцию можно использовать для проверки соотношения ширины и высоты соотношения сторон устройства вывода.

Синтаксис

Функция device-aspect-ratio задаётся как <ratio>. Это функция диапазона, то есть для проверки минимального и максимального значений можно также использовать варианты с префиксами min-device-aspect-ratio и max-device-aspect-ratio соответственно.

Примеры

Использование min-device-aspect-ratio

article {
  padding: 1rem;
}

@media screen and (min-device-aspect-ratio: 16/9) {
  article {
    padding: 1rem 5vw;
  }
}

Спецификации

Спецификация
Медиа-запросы уровня 4 # device-aspect-ratio

Совместимость с браузерами

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`device-aspect-ratio`	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-aspect-ratio