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

Ответ 1

aspect-ratio

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

Источник.

device-aspect-ratio

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

Источник.

Ответ 2

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

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

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

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

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

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

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

Общие пропорции монитора 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) { ... }