Разница между соотношением сторон и отношением устройств в медиазапросах CSS

Question

В чем разница между aspect-ratio и device-aspect-ratio?

Answer 1

Для всех, кто смущен разницей между целевой областью отображения и устройством вывода относительно соотношения сторон:

целевой областью отображения

Соотношение сторон окна вашего браузера или области, в которой отображается ваш веб-сайт (в частности, это может быть встроенный веб-сайт)

устройство вывода

Физическое соотношение сторон экрана.Например, дисплей вашего смартфона или настольного компьютера

Поскольку на смартфонах и планшетах приложения обычно отображаются только в полноэкранном режиме, формат изображения и формат устройства тот же самый.На настольном компьютере это, конечно, не всегда так, поскольку пользователь может изменить размер окна браузера и, таким образом, соотношение сторон изменится.

Надеюсь, это поможет.

Answer 2

соотношение сторон измеряет область просмотра.соотношение сторон устройства измеряет площадь экрана устройства.

Answer 3

Функциональным отличием на мобильном телефоне является то, что использование программной клавиатуры изменяет соотношение сторон, но не меняет соотношение сторон устройства.

Answer 4

aspect-ratio

Описывает соотношение сторон целевой области отображения устройства вывода. Это значение состоит из двух натуральных чисел, разделенных символом косой черты ("/"). Это представляет количество горизонтальных пикселей по сравнению с количеством вертикальных пикселей.

Источник .

device-aspect-ratio

Описывает соотношение сторон устройства вывода. Это значение состоит из двух натуральных чисел, разделенных символом косой черты ("/"). Это представляет количество горизонтальных пикселей по сравнению с количеством вертикальных пикселей.

Источник .

Answer 5

ОТНОШЕНИЕ АСПЕКТА

Соотношение сторон окна просмотра или соотношение сторон устройства - это отношение ширины к высоте.Таким образом, если бы экран имел ширину 1000 пикселей и высоту 500 пикселей, соотношение сторон устройства было бы 2: 1, потому что 1000 - это вдвое больше. Соотношение экранов широко варьируется, хотя на первый взгляд все они выглядят простокак аналогичный прямоугольник.

Общие пропорции монитора: 16: 9 (например, 1920 × 1080 или 1366 × 768 пикселей) или 16:10 (1280 × 800).IPhone 3 и 4S - 3: 2 (480 × 320 и 960 × 640), а iPhone 5 - 16: 9 (1136 × 640).Телефоны на Android обычно имеют формат 4: 3, 3: 2, 16:10 или 16: 9.

Примеры:

@media only screen and (device-aspect-ratio: 16/9)
{ ... }
@media only screen and (min-device-aspect-ratio:
1920/1080) { ... }