Экран с вырезом на iPhone. При фиксации вверху страницы, если вы сдвинете ее вверх или вниз, останется большой пробел. Это нормально, если фон весь белый, в противном случае он будет выглядеть так, как будто он сломан, что очень некрасиво. .
размер экрана айфона
Разница в размере iPhoneX и других моделей
Причина вышеуказанной проблемы заключается в том, что iPhoneX имеет безопасную зону. Под безопасной зоной понимается область визуального окна. На содержимое безопасной зоны не влияют углы, корпус датчика и индикатор «домой» (синяя область на рисунке ниже). :
Другими словами, если мы хотим хорошо адаптироваться, мы должны убедиться, что видимая и работоспособная область страницы находится в пределах безопасной зоны.
Конкретные размеры см. в Руководстве по пользовательскому интерфейсу – iPhoneX.
Как адаптироваться?Первым шагом является настройка макета веб-страницы в визуальном окне.
<meta name=viewport content=width=device-width, viewport-fit=cover>
Новая функция iOS11. Чтобы адаптироваться к iPhoneX, Apple расширила существующий метатег области просмотра, чтобы задать макет веб-страницы в визуальном окне. Можно установить три значения:
Примечание. Веб-страница, которая по умолчанию не добавляет расширения, имеет вид viewport-fit=contain. Если ее необходимо адаптировать к iPhoneX, необходимо установить viewport-fit=cover. Это ключевой шаг для адаптации.Подробнее см.: Дескриптор области просмотра.
На втором этапе основное содержимое страницы ограничивается безопасной областью.
.post { отступ: 12 пикселей; отступ-влево: env(безопасная-область-вставка-влево); отступ-влево: const(безопасная-вставка-вправо); ); отступ справа: const(безопасная область-вставка-справа);} постоянная функцияНовая функция iOS11, функция CSS Webkit, используется для установки расстояния между безопасной областью и границей. Существует четыре предопределенных переменных:
Примечание. Некоторые браузеры больше не поддерживают функцию константы и вместо нее используют функцию env.
По умолчанию, если клиент обрабатывает зону безопасности, эффект следующий:
После использования полноэкранного атрибута viewport-fit=cover:
Карта зоны безопасности:
Рендеринг после ограничения безопасной области:
Отступ установлен на 12 пикселей выше. Если направление повернуто:
Третий шаг — использовать методы min() и max().
@supports(padding: max(0px)) { .post { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-)); верно)); }} Исправлен элемент, исправлена проблема
Если заголовок страницы реализован на лицевой стороне и зафиксирован вверху, он будет заблокирован. В это время вы можете установить для верхнего значения значение безопасного расстояния, например:
.header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);}Справочная статья: Проектирование веб-сайтов для iPhone X
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.