Страница H5 адаптируется к челке iPhone, это так просто

CSS

предисловие

  iPhoneXФизические кнопки были заменены маленькими черными полосами внизу, что привело к неприятной проблеме адаптации экрана на веб-странице. Для веб-страниц браузер уже разобрался с проблемой адаптации вверху (челка), поэтому нам нужно обратить внимание только на проблему адаптации между низом и маленькой черной полосой (то есть обычная навигация по низу, возврат наверх и т. д. элементы, расположенные относительно нижнего фиксированного положения).

  Автор собрал набор простых планов адаптации, чтобы поделиться с вами, ознакомившись с некоторыми официальными документами и объединив некоторый опыт обработки в реальных проектах. Надеюсь, это будет вам полезно. Ниже приведены изображения до и после обработки:

Всем известно, что у iPhoneX есть вырез в верхней части экрана. iPhoneX отменяет физическую кнопку и заменяет ее на маленькую черную полосу внизу. Если не адаптировать, эти места будут заблокированы. Поэтому в этой статье описывается вырез. и черный внизу метод адаптации бара.

несколько новых концепций

безопасный район

  Безопасная область относится к видимому диапазону окон. Содержимое в безопасной области не зависит от углов, корпуса датчика и индикатора исходного положения, как показано на следующем рисунке:

viewport-fit

Новые функции iOS11, Apple, чтобы адаптироваться к существующему iPhoneXviewport metaРасширение метки, используемое для установки макета веб-страницы в визуальном окне, может быть установленотри значения:

ценность описывать
auto значение по умолчанию, за которым следуетcontainСтабильная производительность. Содержимое страницы отображается в безопасной области.viewprot-fit:autoЭквивалентноviewport-fit:contain
contain Видимое окно полностью содержит веб-контент (левое изображение). Содержимое страницы отображается вsafe areaВнутри.viewport-fit:contain
cover Веб-контент полностью закрывает видимое окно (справа). Содержимое страницы заполняет экран.viewport-fit:cover

постоянная функция

Новая функция iOS11, CSS-функция Webkit, используется для установки расстояния между безопасной зоной и границей.Есть четыре предопределенных переменных (единица измерения — px):

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

Уведомление: поведение веб-страницы по умолчанию без добавления расширений: viewport-fit=contain. Если вам нужно адаптироваться к iPhoneX, вы должны установить viewport-fit=cover, иначеconstantФункция не работает, что является необходимым условием адаптации.

  • В официальной документации упоминается будущееenv()заменитьconstant (), пока недоступно
  • Эти две функции являются функциями css в webkit, которые могут напрямую использовать переменные функции, которые поддерживаются только в ядре webkit.
  • constant: Для систем ниже iOS
  • env: Для систем с iOS >= 11.2

Примечание. Производительность веб-страницы без добавления расширений по умолчанию составляетviewport-fit=contain, нужно адаптироватьiPhoneдолжен быть установлен

viewport-fit=cover, что является ключевым этапом адаптации.

Пример адаптации

Шаг 1: Установите макет веб-страницы в видимом окне

<meta name='viewport'  content="width=device-width, viewport-fit=cover" />

Шаг 2: Основное содержимое страницы ограничено безопасной областью

body {
  /* 适配齐刘海*/
  padding-top: constant(safe-area-inset-top);  
 /* 适配底部黑条*/
  padding-bottom: constant(safe-area-inset-bottom);
}

Шаг 3: Адаптация фиксированных элементов

  • Низ не 0
/* bottom 不是0的情况 */
.fixed {
  bottom: calc(50px(原来的bottom值) + constant(safe-area-inset-bottom));
}
  • Нижнее всасывание (нижнее=0)
/* 方法1 ：设置内边距 扩展高度*/
/* 这个方案需要吸底条必须是有背景色的，因为扩展的部分背景是跟随外容器的，否则出现镂空情况。*/
.fix {
  padding-bottom: constant(safe-area-inset-bottom);
}
/* 直接扩展高度*/
.fix {
  height: calc(60px(原来的高度值) + constant(safe-area-inset-bottom));
}

/* 方法2 ：在元素下面用一个空div填充， 但是背景色要一致 */
.blank {
  position: fixed;
  bottom: 0;
  height: 0;
  width: 100%;
  height: constant(safe-area-inset-bottom);
  background-color: #fff;
}
/* 吸底元素样式 */
.fix {
  margin-bottom: constant(safe-area-inset-bottom);
}
  • Наконец: используйте @supports

Поскольку адаптироваться к стилю нужно только моделям с аккуратной челкой и черными полосами внизу, вы можете использовать @support вместе:

@supports (bottom: constant(safe-area-inset-bottom)) {
  body {
    padding-bottom: constant(safe-area-inset-bottom);
  }
}

Полный код обнаружения

  • @supports Изолированный режим совместимости

Поскольку адаптироваться к стилю нужно только моделям с аккуратной челкой и черными полосами внизу, вы можете использовать @support вместе:

@mixin iphonex-css {
  padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
  padding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88px
  padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
  padding-left: env(safe-area-inset-left); //如果未竖屏时为0
  padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
  padding-right: env(safe-area-inset-right); //如果未竖屏时为0
  padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34px
  padding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高度 34px
}

@mixin iphonex-support {
  @supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}
  • @media запросы СМИ
@mixin iphonex-css {
  padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
  padding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88px
  padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
  padding-left: env(safe-area-inset-left); //如果未竖屏时为0
  padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
  padding-right: env(safe-area-inset-right); //如果未竖屏时为0
  padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34px
  padding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高度 34px
}

/* iphonex 适配 */
@mixin iphonex-media {
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}

Пополнить

Примечания

  • envиconstantтолько вviewport-fit=coverКонсоль Safari, использованная выше, может обнаружить веб-страницу в эмуляторе и открыть веб-инспектор.
Категории