фон

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

Однако каждое приложение сильно отличается, и веб-просмотр внутри будет отображаться по-разному. Если нижняя высота приложения отсутствует, нижний контент в веб-просмотре будет заблокирован небольшой черной полосой. С точки зрения совместимости стиля веб-страницы он должен быть совместим с уникальной «челкой» и маленькой черной горизонтальной полосой в нижней части iPhoneX, не затрагивая стиль предыдущих моделей.

безопасная зона

Для начала давайте взглянем на безопасную зону iPhone.

Совместимые решения

К счастью, когда вышел iphoneX, официальная система ios11 также предоставила WebKit Api, совместимую с этой разницей в стиле.

Шаг 1. Установите атрибут viewport-fit.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
viewport-fit имеет три значения атрибута: auto, contains и fit. По умолчанию установлено авто.
Содержит: визуальное окно полностью содержит содержимое веб-страницы, и содержимое страницы отображается в безопасной области.
обложка: содержимое веб-страницы полностью закрывает визуальное окно, а содержимое страницы заполняет экран.
auto: значение по умолчанию, соответствующее содержанию
 
По умолчанию Safari отображает ситуацию viewport-fit=contain, как показано ниже. В альбомном режиме содержимое страницы в веб-просмотре находится в безопасной зоне. Однако с точки зрения стиля это не очень красиво и не позволяет эффективно использовать полноэкранную функцию iPhoneX.

Чтобы решить эту проблему, WebKit в ios11 включает новую функцию CSS env(), а также четыре предопределенные переменные среды.safe-area-inset-left,safe-area-inset-right,safe-area-inset-topиsafe-area-inset-bottom. Эти четыре переменные среды представляют расстояние от безопасной зоны.

  • Safe-area-inset-left: расстояние между безопасной зоной и левой границей.
  • Safe-area-inset-right: расстояние от безопасной зоны до правой границы
  • Safe-area-inset-top: расстояние от безопасной зоны до верхней границы
  • Safe-area-inset-bottom: расстояние от безопасной зоны до нижней границы

До ios11.2 использовалась функция Constants(), но позже в ios11.2 она была заменена на функцию env(). Чтобы быть совместимым с обоими, вы можете написать оба.

Шаг 2. Установите расстояние безопасной зоны.

.post {
    padding: 12px;
    padding-left: constants(safe-area-inset-left); // ios<11.2
    padding-left: env(safe-area-inset-left); // ios>=11.2
}

Таким образом, когда он не находится в безопасной зоне, env(safe-area-inset-left) не равен 0, что приведет к установке безопасного расстояния в левом отступе, чтобы содержимое не блокировалось.

Вышеописанный случай блокируется «челкой». Фактически, в большинстве случаев маленькая черная полоса внизу блокирует плавающую полосу, и атрибуты подтверждают это решение.@supports,толькоenv(safe-area-inset-bottom)CSS внутри будет выполняться только в том случае, если он поддерживается браузером.

 

.bottom-bar{
  width: 100%;
  position: fixed;
  bottom: 0;
  background: blue;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-bar {
      padding-bottom: constant( safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

Примечание. По умолчанию веб-просмотр в WeChat имеет значение viewport-fit=cover. Вам нужно только установить безопасное расстояние. Вышеупомянутое решение также применимо к апплету WeChat.