env (safe-area-inset-top) не работает на Android Pie + WebView 69 - PullRequest
Новая
       61

env (safe-area-inset-top) не работает на Android Pie + WebView 69

0 голосов
/ 24 сентября 2018

У меня полноэкранное приложение Cordova, я использовал css ниже для вырезки iPhone X, 

padding-top: 25px;
padding-top: env(safe-area-inset-top);

, и Android будет игнорировать env(safe-area-inset-top), и используйте 25px, чтобы запретить строку состоянияпокрывая мой взгляд.

enter image description here

Вот в чем дело, я неожиданно обнаруживаю поддержку веб-просмотра env() после обновления компонента Android System Webview до версии 69.0.3497.100 в моем телефоне Android Oreo (Huawei mate10).

enter image description here

Но при установке этого приложения Cordova в эмуляторе Android Pie (с включенным имитатором выреза иУстановлен Chrome / Webview 69), я обнаружил, что env(safe-area-inset-top) равен 0px, нет отступа вообще.

enter image description here

enter image description here

Область выреза / строка состояния закрывает мой веб-контент:

enter image description here

Поддерживает ли Chrome / Webview 69 safe-area-inset-top или нет?

1 Ответ

0 голосов
/ 19 октября 2018

Поддержка констант env () была введена в Chrome 69 .Хотя поведение, как я наблюдаю, отличается от iOS.На экране iPhone 8 без надреза env(safe-area-inset-top) равно 20 пикселей, в то время как на экране Moto G без надреза оно равно 0.

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

/**
 * Android save-area env variables behave differently from iOS ones:
 * env(safe-area-inset-top) will return 0 on Android and 20px on iOS.
 * In case android behavior spotted, body is added class `app-android-safe-area`
 */
function checkSafeArea() {
  const $body = $(document.body);
  const $div = $('<div style="padding-top: env(safe-area-inset-top); padding-top: constant(safe-area-inset-top);"></div>');

  $div.appendTo($body);

  const safeAreaInsetTop = $div.outerHeight();

  if (!safeAreaInsetTop) {
    $body.addClass('app-android-safe-area');
  }

  $div.remove();
}

и адаптировал мои стили так: 

body.app-ts-mobile & {
  margin-top: 20px; // fallback for no safe area support
  margin-top: constant(safe-area-inset-top); // iOS 11
  margin-top: env(safe-area-inset-top); // iOS 11.2+
}

body.app-ts-mobile.app-android-safe-area & {
  margin-top: 20px;
}

Хотя я еще не проверял, какое значение env(safe-area-inset-top) на экране Android с надрезомподарок.Возможно, ему не хватает высоты строки состояния.

...