IphoneX адаптируется к правильной осанке

внешний интерфейс iOS
IphoneX адаптируется к правильной осанке

Автор: Человек, мечтающий стать большой коровой

написать впереди

Прошло уже почти три года с момента выпуска iphonex в сентябре 2017 года (поэтому содержание челки головы модели iphonex (корпус датчика) и нижней черной полосы (индикатор Home) не будет слишком подробно обсуждаться в этой статье), я полагаю есть еще Некоторые студенты беспокоятся о том, как идеально подогнать модели серии iphonex.Автор сделал резюме на основе проекта мобильного терминала h5 компании и некоторых официальных документов, надеясь помочь всем.

Предварительные знания

Перед тем, как начать игру, нам нужно понять три важных аспекта: безопасная область, вьюпорт-фит, env() и константа().

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

Каждый должен понимать, что такое безопасная зона, верно? Как следует из названия, как показано на рисунке ниже, безопасная область относится к той части области, на которую не влияют челка на голове и маленькие черные полосы внизу.image Официальный веб-сайт Apple Руководство по взаимодействию человека с компьютером

viewport-fit

viewport-fit — новая функция IOS 11. Значения перечисления viewport-fit вводятся следующим образом:

  • содержат: видимое окно полностью содержит веб-контент (левое изображение)
  • обложка: содержимое веб-страницы полностью закрывает видимое окно (справа)
  • auto: значение по умолчанию соответствует производительности контейнера.

О ViewPort-Fit Подробнее

env() и константа()

Все виды iphone x имеют неправильную форму, нам нужно контролировать содержимое нашей страницы в безопасной области, упомянутой ранее, так как же очистить верхнюю и нижнюю части страницы? Я должен сказать, что Apple очень предусмотрительна.Они предоставили разработчикам информацию о местоположении безопасной зоны через константы CSS.Эти константы CSS необходимо обернуть двумя функциями env() и Constant(), чтобы получить их. В частности, см. этоissue

Постоянное значение информации о местоположении безопасной зоны

  • safe-area-inset-top: размер вставки безопасной области (в пикселях CSS) от верхней части области просмотра.
  • safe-area-inset-bottom: размер вставки безопасной области (в пикселях CSS) от нижней части окна просмотра.
  • safe-area-inset-left: размер вставки безопасной области (в пикселях CSS) с левой стороны окна просмотра.
  • safe-area-inset-right: область безопасности, начинающаяся с правильного размера вставки области просмотра (CSS-пиксели).

Введение в env() и константу()

env() и Constant() — это новые возможности IOS 11. Это две функции css. Давайте посмотрим на совместимость этих двух функций:

image

Мы видим, что константная функция поддерживается в IOS 11.0-11.2.После 11.3 константная функция заброшена и заменена функцией env.

Простой пример

Очистите нижнее безопасное расстояние

padding-bottom: constant(safe-area-inset-bottom);  // 兼容 11.0 < iOS < 11.2
padding-bottom: env(safe-area-inset-bottom);  // 兼容 iOS >= 11.2

будь осторожен

  • Вам нужно установить viewport-fit=cover, доступна только информация о местоположении безопасной области;
  • При написании должны быть написаны как константные, так и env-функции, чтобы добиться совместимости со всеми системами IOS 11;

резюме

Следует отметить, что предварительным условием для использования информации о местоположении безопасной области является установка viewport-fit=cover, и тогда вышеупомянутая информация относится к новому содержимому IOS 11. Заводская система iphonex больше или равно 11.0, так что вы можете использовать его с уверенностью и смелостью Совместимость с iphonex.

правильная осанка

После прочтения вышеизложенного у всех какие-то странные знания, и тогда мы официально вступим в ссылку адаптации к моделям серии iphonex. Конечно, прочитав следующее, мы будем использовать самую совершенную и лаконичную позу для адаптации, не моргайте, идите~

Предварительные условия

установить viewport-fit=cover

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

«Контейнеры» для моделей серии iphonex, которые необходимо адаптировать

Наши мобильные страницы h5 обычно открываются в четырех «контейнерах»: WeChat, веб-страницы, приложения и небольшие программы. Поэтому нам нужно сделать некоторые адаптации на нашей странице для этих четырех «контейнеров», чтобы идеально показать танцующую позу наложницы в моделях серии iphonex.

Адаптация в WeChat, мини-программы и веб-страницы

голова

Потому что в этих "контейнерах" головы были приспособлены под нас "контейнерами" (разумеется царь естественно), так что нам нужно обращать внимание только на дно.

Нижний

Поза: оставьте безопасное расстояние внизу общей страницы (разные элементы располагаются по-разному, в зависимости от ситуации, чтобы решить, какое место более разумно (страница, основная страница)):

body {
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

Адаптация в приложении

голова

Совместимость с головкой Нам нужно начать с компонента навигационной головки нашего собственного проекта.Идея состоит в том, чтобы добавить максимальное безопасное расстояние к навигационной головке, чтобы предотвратить попадание навигационной головки на челку.

  • Добавьте определенное имя класса при оценке в ios и в среде приложения, например: ipx-head-nav
  • Добавьте значение padding-top в ipx-head-nav, чтобы освободить верхнее безопасное расстояние.
.ipx-head-nav {
  padding-top: 20px; // iphonex系列机型之前顶部安全距离均为20px
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

Верх отступа составляет 20 пикселей, чтобы быть совместимым с моделями до систем iphonex и IOS 11, а функции константы и env совместимы с моделями после систем iphonex и IOS 11.

Нижний

И в микро-буквы, апплет, в нижней части веб-страницы подходят позы последовательной, единой позиции.

Обработка некоторых особых сценариев

Кнопка нижнего всасывания (внизу === 0)

Рекомендуется, чтобы нижние кнопки всасывания были изменены на фиксированное положение, а затем мы использовали эту позу для адаптации:

.btn {
  position: fixed;
  bottom: 0; // 当constant和env函数都不支持的时候，这个会生效
  bottom: constant(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom);
  &:after {
    content: ' ';
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
  }
}

Потому что на iphonex нижняя часть кнопки находится на безопасном расстоянии от нижней части, и внизу будет пустое пространство, поэтому это пространство необходимо заполнить.

Идеи:

  1. Нижнее значение кнопки сначала адаптировано для iphonex;
  2. Добавьте новый элемент в нейтральное положение, а высота — это высота безопасного расстояния.

Элементы с фиксированным положением, которые не полностью всасываются снизу (нижний !== 0), такие как кнопка «наверх»

Здесь мы предполагаем, что есть требование, кнопка «наверх», которая должна быть на 30 пикселей снизу и должна быть адаптирована к iphonex, тогда мы можем использовать следующую позу:

.back-top-btn {
  bottom: 30px;
  bottom: calc(30px + constant(safe-area-inset-bottom));
  bottom: calc(30px + env(safe-area-inset-bottom));
}

В системах, которые не поддерживают функции констант и env, значение, рассчитанное по дну, недопустимо, и вступит в силу значение дно: 30 пикселей.

Небольшое благосостояние

Я считаю, что теперь вы освоили правильную позу для моделей серии iphonex.Если вы используете scss для написания стилей в своем проекте, вот вам 3 потрясающих чита позы.Такая простая поза должна быть видна с первого взгляда.Если вы можете понять как его использовать, если вы не понимаете, вы можете оставить сообщение в области комментариев и спросить:

// ipx系列底部padding值
@mixin iphonex-padding-bottom($paddingBottom: 0px) {
  padding-bottom: $paddingBottom;
  padding-bottom: calc(#{$paddingBottom} + constant(safe-area-inset-bottom));
  padding-bottom: calc(#{$paddingBottom} + env(safe-area-inset-bottom));
}

// ipx系列fixed定位底部bottom值
@mixin iphonex-fixed-bottom($bottom:0px) {
  bottom: $bottom;
  bottom: calc(#{$bottom} + constant(safe-area-inset-bottom));
  bottom: calc(#{$bottom} + env(safe-area-inset-bottom));
}

// ipx系列fixed定位bottom为0的处理函数
@mixin iphonex-fixed-bottom-zero($backgroundColor: #ffffff) {
  @include iphonex-fixed-bottom();
  &:after {
    content: ' ';
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $backgroundColor;
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
  }
}

напиши в конце

Приведенные выше позы являются более общими решениями, которые суммировал автор, но решения не уникальны Я просто надеюсь предоставить вам решение, которое сделает ваше приложение более совершенным. Наконец, конечно, я хотел бы поблагодарить всех за чтение, спасибо~

Категории