Хобрук: Ваш путь к мастерству в программировании

Пропорциональные медиа-запросы с использованием единиц измерения окна просмотра

Проблема:

iOS8/Safari, похоже, не понимает/не поддерживает медиа-запросы, содержащие единицы области просмотра, такие как: (max-height: 175vw). Однако он отлично работает на устройствах iOS9. Я пытался использовать max-aspect-ratio и max-device-aspect-ratio, но они также игнорируются.

Кто-нибудь знает, почему это не работает, или знает какой-либо другой способ создания медиа-запросов, которые не привязаны к пропорциям/соотношениям сторон вместо конкретных размеров экрана?

Объяснение (или зачем мне это вообще нужно?)

Мы работаем над приложением для ios/android с использованием Cordova, и вместо того, чтобы беспокоиться о точках останова и всех различных размерах экрана, мы решили довольно широко использовать единицы области просмотра и беспокоиться только о нескольких пропорциях соотношения сторон/размера экрана.

Итак, прямо сейчас стили, которые у нас есть, отлично работают на таких устройствах, как iPhone 5, 6, 6+, большинстве устройств Android (и любом другом устройстве, которое имеет такие же пропорции или что-то среднее между ними).

Теперь такие устройства, как iPhone4 и iPad, имеют совершенно разные пропорции; они более «квадратные», как говорится. Чтобы учесть это, нам просто нужен медиа-запрос для пропорций 7/4 и ниже, а (max-height: 175vw) отлично работает на устройствах iOS9 и Android (мы используем Crosswalk для Android, поэтому рассмотрите также Chrome), но, похоже, не работает. на iOS8/сафари.

Обновление:

Просто возникла идея. Сейчас я буду использовать (max-height: 175vw), и это должно исправить все устройства Android (по крайней мере 4.4, которые мы поддерживаем) и устройства iOS9. После этого мне может понадобиться дополнительный медиа-запрос для iPhone4 и/или iPad.


Ответы:


1

Похоже, что соотношение сторон поддерживается для медиа-запросов, поскольку я только что проверил в текущих версиях Firefox, Chrome и Safari (см. демонстрация).

 @media screen and (max-aspect-ratio: 1/1) {
     .landscape { display: none; }
 }

Обратите внимание, что вы должны указать соотношение в виде деление (например, 16/9). Значения с плавающей запятой (например, 1,7777) не поддерживаются.

Конечно, в медиа-запросе min-aspect-ratio функционально эквивалентен max-width с соответствующим значением в единицах области просмотра (vh), но лучше поддерживается браузерами.

24.08.2016

2

Пока единицы области просмотра не поддерживаются, вы можете использовать cordova-anyscreen для выполнения того, что хотите. https://github.com/biodiv/cordova-anyscreen .

Вы также сможете поддерживать Android до 4.0, может быть, даже 2.3 (что может быть неважно) и iOS 6+.

Пропорциональная компоновка выполняется применительно к экрану с размерами 1080*1920. Поэтому, если вам нужна ширина 50%, вы должны использовать 540 пикселей. Дисплей измеряется сценарием, и он пересчитывает 540 пикселей, соответствующих экрану.

04.03.2016
Новые материалы

Управление DOM для чайников вроде меня
Одной из первых вещей, которую мы рассмотрели, когда начали изучать Javascript во Flatiron, была модель DOM. Кто он? Чем он занимается? Он больше машина, чем человек? Ну да довольно много. ДОМ..

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

мои январские чтения по программированию
Эрик Эллиот Программирование приложения JavaScript Эл Свейгарт «Автоматизируйте скучные вещи с помощью Python» Прогрессивное веб-приложение Google..

Создание ассоциаций секвелизации с помощью инструмента командной строки Sequelize
Sequelize - популярный, простой в использовании инструмент объектно-реляционного сопоставления (ORM) JavaScript, который работает с базами данных SQL. Довольно просто начать новый проект с..

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

Введение в машинное обучение для обнаружения аномалий (часть 1)
Тщательно созданный, тщательно спроектированный ресурс для специалистов по данным. Часть 1 Главы 03 из Руководства по машинному обучению для обнаружения аномалий Внимание! Прежде чем вы..

Начало работы с Pulumi в Digital Ocean
Цифровой океан (ДО) — отличная альтернатива многим другим поставщикам облачных услуг. DO предоставляет простой и понятный пользовательский интерфейс, упрощающий управление инфраструктурой и..