Атрибуты безопасной зоны CSS не работают на iPhone X

В моем случае я запускаю веб-приложение на iPhone X, я пытаюсь добавить сверху отступ, чтобы подтолкнуть свое тело к безопасной области, используя атрибуты css безопасной области Webkit padding-top: constant(safe-area-inset-top); и padding-top: env(safe-area-inset-top);. Однако веб-представление неправильно оценивает эти атрибуты, и оно всегда равно 0. Что мне делать, чтобы оно работало! код:

body {
padding-top: 44px;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

введите описание изображения здесь

введите описание изображения здесь


ios iphone html css iphone-x
person Ouss StinGray    schedule 15.11.2017    source источник
comment
Вы нашли для этого решение?   -  person Ebru Güngör    schedule 21.11.2017
comment
добавить мета области просмотра с помощью viewport-fit = cover   -  person Albi Patozi    schedule 13.09.2019

Ответы (4)


arrow_upward
11
arrow_downward

это нужно

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

в разделе заголовка вашего HTML

person Albi Patozi    schedule 13.09.2019
comment
В моем случае в моем метатеге, который я взял с сайта developer.mozilla (самый популярный в Google), отсутствовала обложка viewport-fit =, которая, по-видимому, является важной частью. - person elmarko; 05.07.2020

arrow_upward
3
arrow_downward

Во-первых, safe-area-inset-dir не определен в Chrome и Safari на Mac, где, как я подозреваю, вы измеряете заполнение. Насколько мне известно, вам нужно будет загрузить сайт на устройство iOS 11 в Safari, чтобы увидеть, что эта переменная имеет какое-либо значение. Я подозреваю, что именно поэтому у вас проблема с заполнением 0px.

Кроме того, начиная с iOS 11.2, можно использовать ключевое слово env. Фактически, рекомендации по дизайну iPhone X ссылаются на это и даже включает хороший полный пример для определения его поддержки:

@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

Этот шаблон сделает за вас несколько вещей:

  • Поскольку max не является частью стандартного CSS, мы знаем, что мы находимся в Safari / Webkit, где должно быть определено safe-area-inset-dir (где dir - направление).
  • Также это установит заполнение элемента либо на желаемое «нормальное» заполнение (в данном случае 12px) на большинстве устройств, либо на необходимое безопасное пространство, если вы используете iPhone X. Это связано с тем, что iOS 11 на iPhone 8 определит эту переменную как 0, что в противном случае приведет к заполнению 0px.
person Hawkins    schedule 19.12.2017
comment
Кажется, что min() и max() скоро станут стандартными функциями CSS. Таким образом, в ближайшем будущем это правило может быть нацелено даже на другие устройства / браузеры, кроме iPhone X. См. черновики .csswg.org / css-values ​​/ # calc-notation. - person Kout; 13.06.2018
comment
Хорошая работа, спасибо за информацию! Apple, вероятно, пересмотрит сообщение в блоге, на которое я указал в будущем (как и мы, этот ответ), чтобы обнаружить env вместо max в @supports, если мне нужно будет догадаться. Когда наступит этот день, я не уверен, как будет вести себя этот код, когда @supports разрешит true, но env не определено в таких браузерах, как Chrome, Firefox. Мы можем иметь padding-left: 12px; и padding-left: max(12px, env(safe-area-inset-left)); в следующей строке и просто указать Chrome, что правило недействительно и по умолчанию используется 12px в качестве побочного эффекта. - person Hawkins; 13.06.2018
comment
Здорово! Добавление этой резервной строки было бы безопаснее. Хотя время еще не пришло, это на будущее = ›Я лучше сейчас добавлю это в свой код :) - person Kout; 14.06.2018
comment
Включается ли весь этот фрагмент кода в набор правил body {}? Я не знаком с использованием @ в файле css. - person Alex; 28.04.2021

arrow_upward
0
arrow_downward

без строки padding-top: env (safe-area-inset-top); он должен работать

person Sabine    schedule 17.11.2017

arrow_upward
0
arrow_downward

Это будет работать как амулет для ionic v3 (или меньше):

Добавьте это в свой index.html

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

затем в yout global.scss

.ion-app {
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  height: calc(100% + (var(--safe-area-inset-top) + var(--safe-area-inset-bottom)));
}

в ionic v4 и более поздних версиях кажется, что эта проблема уже решена.

person Cristian Zumelzu    schedule 18.06.2020