Несколько дней назад я увидел нескольких друзей, которые занимаются веб-дизайном и изучают iPhone X. В Интернете уже есть несколько хороших статей, например:
- iPhone x の お ke ni ru safari web u nn te nn tsu の представление
- Removing the White Bars in Safari on iPhone X
Но кажется, что это все еще небольшая проблема с принятием того, что он не был переведен на китайский язык.Гоувэй Сюй Мин позаимствовал содержание, чтобы написать китайскую версию.
Прежде всего, четыре стороны экрана iPhone X имеют выделенную область для iOS, верхняя часть — это строка состояния, которая отображает время и сигнал беспроводной сети, а нижняя — домашняя панель для iPhone X, чтобы разблокировать и выпрыгнуть из Приложение. Используемая зона называется безопасной зоной.
С учетом Безопасной зоны общий контент веб-страницы будет отображаться в режиме по умолчанию:
предустановленный режим
В режиме по умолчанию границы остаются вверху и внизу при вертикальной ориентации (портрет) и слева и справа при горизонтальной ориентации (альбомная ориентация), а синяя область — это область, в которой отображается содержимое веб-страницы. Поведение скрытия, например, адресной строки, такое же, как и в прошлом, но проблема в том, что белая область не зависит от содержимого веб-страницы, то есть, если ваша веб-страница имеет цвет фона, он не изменится. к цвету белой области, что не будет хорошо смотреться визуально.
Используйте Viewport-fit=cover
Интересно, Apple действительно использует этоCSS Round DisplayНовое значение @viewport, предложенное в viewport-fit. Спецификация CSS Round Display была опубликована три года назад на конференции W3C. На встрече TPAC инженеры LG взяли на себя инициативу по выдвижению этой идеи, и два года назад она была официально оформлена. В основном я думал о необходимости отображать веб-контент на круглом экране смарт-часов, но не ожидал, что Apple будет использовать его на iPhone X.
Короче говоря, если вы хотите использовать полноэкранный режим iPhone X для отображения веб-контента, установите для области просмотра значение:
<meta name="viewport" content="viewport-fit=cover">
Это займет все пространство экрана.
Защитите границы с помощью безопасной области-вставки-*
Тем не менее, будут проблемы при использовании напрямую. Например, правая сторона экрана будет заблокирована датчиком (челкой), когда он удерживается горизонтально. Поскольку пространство, такое как домашний бар, зарезервировано для системы, Подключение также не удастся, что приведет к плохому пользователю., Дело в следующем:
Как и на этой картинке, меню в правом верхнем углу не может быть нажато, потому что оно использует пространство, занимаемое системой, а значок LinkedIn также будет заблокирован челкой, что не очень хорошо.Чтобы решить эту проблему, Apple предоставляет несколько свойств CSS для работы.
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)Эти значения могут быть определены автоматически:
- Держится ли устройство вертикально или горизонтально;
- Для полноэкранного отображения или общего отображения;
- Модель iPhone (iPhone X или что-то другое).
для расчета занимаемой площади.
Поэтому просто оберните веб-контент следующим синтаксисом:
.container {
padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);
}
Проблема, заключающаяся в том, что содержимое перекрывается с зарезервированной системой областью в полноэкранном режиме, может быть исправлена.Для приведенного выше примера это можно улучшить следующим образом:
В то же время он может устранить несоответствие дизайна, вызванное Safa Area, а также может обеспечить удобство работы пользователей.
Constan() и вставка безопасной области все еще тамЭтап предложения.
Если вы считаете, что эта статья хороша, пожалуйста, перейдите к первоисточнику к автору 👏:
iPhone X の Safari に お け る Web コ ン テ ン ツ の выражение