Мысли о iPhone X и веб-дизайне
Экран iPhone X имеет заметно более высокое соотношение сторон, чем у более ранних моделей. Когда выстроены в линию, линия тренда четкая. IPhone безошибочно двигается в сторону более узкого профиля.
iPhone X 19,5: 9 @ 3x iPhone 6/7/8 Plus 16: 9 @ 3x iPhone 6/7/8 16: 9 @ 2x iPhone 5 / C 16: 9 @ 1x iPhone 3GS 3: 2 @ 1x Соотношение сторон экрана iPhone и соотношение пикселей устройства
Высота экрана теперь более чем вдвое превышает ширину (19,5: 9). И это не одиноко. Galaxy S8 и LG V30 имеют очень похожие пропорции (18,5: 9 и 2: 1 соответственно). Отрасль в целом отходит от прежней стандартной шкалы 16: 9.
Ну, когда дело доходит до изображений, соотношение сторон имеет большое значение, особенно на устройствах, которые могут вращаться. Изображение героя 16: 9, которое покрывает экран ноутбука с разрешением 1280x1024 пикселей, выглядит смешно на iPhone 11 с разрешением 1125x2436 пикселей в портретной ориентации.
Большое изображение героя 16: 9 на MacBook Pro и iPhone X с портретом
Поэтому все важнее рассматривать рендеринг больших изображений в стиле витрины. Один из вариантов - планировать снимать или приобретать фотографии с достаточным объемом свободного пространства за пределами фокуса изображения. Хороший пример такого подхода можно найти в Долгое чтение Сборник расширенных очерков о theguardian.com ,
Независимо от книжной или альбомной ориентации фотография заполняет доступное пространство экрана.
В качестве альтернативы, изображение может быть дополнено определенным цветом или рисунком, чтобы заполнить недостающее пространство. Это может хорошо работать с иллюстрациями или фонами с зеленым экраном, но старайтесь избегать этого с прямоугольными фотографиями. Полностью расплывчатые фотографии выглядят великолепно на OLED-экране от края до края.
Третий вариант - полностью заменить его другой фотографией. Этот подход может быть реализован с помощью элемента изображения или медиазапросов CSS, как это делает Apple при демонстрации iPhone X.
Изображение продукта для iPhone X меняется в зависимости от соотношения сторон экрана.
Продолжится ли тенденция к похудению или маятник вернется?Кто может сказать?
В любом случае, что это значит для веб-сайтов?