Правильная осанка совместима с челкой iphone x

внешний интерфейс Безопасность CSS Safari

Перенесено из сообщества IMWeb, автор: zzbozheng,Оригинальная ссылка

Ранним утром 13 сентября я, наконец, дождался долгожданной конференции по запуску нового продукта Apple.Я полагаю, что многие друзья с нетерпением ждут нового iPhone, чтобы подстричь челку и бороду, но чего они никогда не ожидали, так это того, что три разных размеры iphone x придут. Боже мой, так долго ждал, пока ты мне это покажешь? Фермер кода сильно запаниковал, чтобы найти логические пиксели нового iPhone, а потом задумался о том, как совместимо с челкой и бородой.

прошлая практика

Фактически, для веб-интерфейса челки можно игнорировать в большинстве сценариев, потому что строка состояния сафари или клиента (WeChat, мобильный QQ и т. д.) сгладила для нас верхние челки, нам нужно позаботиться только о нижних Эта черная борода, потому что, если бы внизу страницы была кнопка, она была бы заблокирована бородой, раньше у нас были подбородки, совместимые с iphone x, но, оглядываясь назад, это было неправильно. Вот что мы делали раньше:
первый в<html>Добавьте соответствующее имя класса в:has-bottombar

<html class="has-bottombar">
    <head></head>
    <body></body>
</html>

Снова с соответствующим CSS:

@media only screen and (-webkit-device-pixel-ratio: 3) and (device-height: 812px) and (device-width: 375px) {
  .has-bottombar {
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 34px;
  }

  .has-bottombar:after {
    content: '';
    z-index: 9999;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 34px;
    background: #fff;
  }
}

Метод обработки здесь заключается в использовании медиазапроса медиазапроса для специальной обработки в соответствии с размером iphone x (375px * 812px), в основном для выполнения двух задач:
1. Зарезервируйте пространство в 34 пикселя в нижней части html, чтобы содержимое страницы оставалось на расстоянии 34 пикселя от нижнего края, что позволяет избежать перекрытия бороды.
2. СоздайтеafterПсевдокласс по настройкеposition: fixedПоместите его внизу страницы и установите белый цвет.Этот процесс в основном предназначен для блокировки цвета фона страницы.
Эффект следующий:


Это решает проблему бороды внизу, давайте попробуем горизонтальный экран, чтобы увидеть:
Здесь есть явная проблема: текст в левой части страницы перекрывается челкой.

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

Если эти обработки сделать до 13 сентября, это не большая проблема, но после 13 сентября у студентов фронтенд-разработки будет большая голова, потому что новые три айфона имеют разные размеры (логические пиксели xr: 375*812; xs: 414*896;xs max: 414*896 ;) Итак, я начал пересматривать медиа-запрос. . . Если в следующем году появится еще несколько размеров, изменения будут бесконечными.

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

В iOS 11 мы можем использоватьviewport-fit=cover + safe-area-inset-*.
Так нельзя ли использовать их ниже ios11? да, но видели ли вы iphone x+ с ios 11 или ниже? Так что мы можем продолжать счастливо.

Прежде чем мы начнем, давайте разберемся, что такое безопасная зона.Проще говоря, область, кроме челки и бороды, является безопасной зоной:

О подгонке окна просмотра

viewport-fit имеет 3 значения:
содержат: видимое окно полностью содержит веб-контент (левое изображение)
обложка: содержимое веб-страницы полностью закрывает видимое окно (справа)
auto: значение по умолчанию, совместимое с содержанием

Как вы определяете значения, подходящие для области просмотра? Мы должны рассмотреть ряд вопросов:
1. При установке границы области просмотра на непрямоугольном дисплее область ограничивающей рамки области просмотра больше, чем область отображения, что приводит к области отсечения.
2. Если вы хотите убедиться, что никакая часть веб-страницы не скрыта, и не хотите, чтобы веб-страница была маленькой с точки зрения удобочитаемости, лучше всего установить параметр окна просмотра, чтобы покрывать и отображать страницу в режиме реального времени при рассмотрении режущие части.
3. Еще одно соображение заключается в том, что когда мы устанавливаем viewport-fit:contain, что является значением по умолчанию, установка свойств css, таких как safe-area-inset-*, не работает.Нажмите здесь, чтобы узнать больше о подгонке окна просмотра

О безопасной области-вставка-*

Все виды iphone x имеют неправильную форму, как мы можем контролировать элементы страницы в безопасных областях? Apple предоставляет разработчикам расположение безопасной зоны через свойства css, что можно сделать с помощью функции CSS Constant():

constant(safe-area-inset-top): Установите сумму (пиксели CSS) внутри безопасной зоны в верхней части окна View
constant(safe-area-inset-bottom): Установите количество (пиксели CSS) внутри безопасной области в нижней части области просмотра.
constant(safe-area-inset-left): Установите количество (пиксели CSS) в безопасной области в левой части окна просмотра.
constant(safe-area-inset-right): Установите количество (пиксели CSS) в безопасной области в правой части окна просмотра.

Проще говоря, мы можем пройтиconstant( )Можно получить небезопасную маржу, а потом комбинироватьpaddingилиmarginдля управления элементами страницы, чтобы избежать небезопасных областей. Webkit добавляет функции CSS в iOS11: env() заменяет константу(), env() рекомендуется в документации, а константа() будет объявлена ​​устаревшей в Safari Technology Preview 41 и бета-версии iOS11.2. В браузерах, не поддерживающих env(), это правило стиля автоматически игнорируется и не влияет на нормальное отображение веб-страниц. Для максимальной совместимости мы можем использовать как константу(), так и env().

.yourFooterClass {
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
}

В этой статье env() используется только для краткости.

Волна практики

1. Установите макет веб-страницы в видимой области

Добавьте атрибут viweport-fit, чтобы содержимое страницы полностью покрывало все окно:

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

2. Храните основной контент в безопасном месте

Предполагая, что высота нашей нижней кнопки составляет 50 пикселей:

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: 50px;  /* 兼容不支持 env( ) 的设备  */
  padding-bottom: calc(env(safe-area-inset-bottom) + 50px); /* 在 iphone x + 中本句才会生效 */
  padding-left: env(safe-area-inset-left);
}

Есть два ключевых момента:
1. написано впередиpadding-bottom: 50pxЧтобы обеспечить совместимость с устройствами без нижних бородок, сделайте так, чтобы основное содержимое смещалось по высоте нижней кнопки, чтобы кнопка не закрывала содержимое.
2,padding-bottom: calc(env(safe-area-inset-bottom) + 50px);рассчитать底部非安全区域距离а также底部按钮高度сумма, которую нужно сделатьpadding-bottomvalue, если устройство поддерживает env, тогда calc рассчитает допустимое значение, это предложение имеет наивысший приоритет и перезапишет предыдущееpadding-bottom: 50px. В противном случае calc вычислит недопустимое значение, и это утверждение не сработает. Таким образом можно добиться совместимости даже с устройствами, не поддерживающими env.

Пока что в горизонтальной сцене экрана содержимое слева не будет заблокировано челкой:

В-третьих, обработка нижней кнопки

Сначала дайте нижней кнопке внешний контейнер.btn-container, есть несколько ключевых моментов при настройке стилей:
1. Настройкиpadding-bottom: env(safe-area-inset-bottom);Увеличьте значение отступа, чтобы нижняя часть расширялась на небезопасное расстояние.
2. Настройкиbackground: #FFFпусть весь.btn-containerФон белый (включая недавно добавленную нижнюю область отступов), так что нижнее содержимое может быть скрыто.
3. Настройкиbox-sizing: content-box;, потому что при нормальных обстоятельствах css обычно устанавливается на этапе сброса* {box-sizing: border-box;}Таким образом, установка отступов не может увеличить расстояние наружу, поэтому здесь мы должны изменить его обратно.content-box.

.btn-container {
  box-sizing: content-box;
  height: 50px;
  line-height: 50px;
  color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: #FFF;
  padding-bottom: env(safe-area-inset-bottom);
}

.btn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #00c340;
  border: none;
}

Взгляните на эффект:


В сафари страница немного скользит вверх, и после того, как появится панель управления сафари, нижняя кнопка все еще будет рядом с панелью управления, что очень духовно:

Все выглядит аккуратно, изящно и нежно.

наконец

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


Прокрутка элементов автоматически обводит челку iPhone X с помощью фигур CSS.

Категории