Фон

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

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

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

Прежде всего разберитесь в безопасной зоне iphoneX. Синяя часть на рисунке ниже — безопасная зона. Поля с обеих сторон, вырез вверху и небольшая черная полоса внизу — все это небезопасные области и области, где содержимое может быть заблокировано. Затем нам нужно контролировать наш контент в безопасной зоне.

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

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

Шаг первый: установите атрибут соответствия области просмотра

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

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

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

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

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

.post {
    отступ: 12 пикселей;
    отступ-слева: константы (безопасная область-вставка-слева); // iOS<11.2
    отступ слева: env (безопасная область-вставка-слева); // ios>=11.2
}

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

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

.нижняя панель{
  ширина: 100%;
  положение: фиксированное;
  внизу: 0;
  фон: синий;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .нижняя панель {
      отступ-дно: константа (безопасная область-вставка-дно);
      отступ-дно: env (безопасная область-вставка-дно);
    }
  }

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