env(safe-area-inset-top) 在 Android Pie + WebView 69 上不起作用

Question

我有一个全屏 Cordova 应用程序，我曾经使用下面的 css 来制作 iPhone X 的刘海，

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

Android 将忽略env(safe-area-inset-top)，并使用25px 来防止状态栏覆盖我的视图。

事情是这样的，在我的Android Oreo手机（华为mate10）上Android System Webview组件升级到69.0.3497.100版本后，突然发现webview支持env()。

但是当我在 Android Pie 模拟器中安装这个 Cordova 应用程序时（启用了剪切模拟并安装了 Chrome/Webview 69），我发现env(safe-area-inset-top) 是 0px，根本没有填充顶部。

剪切区域/状态栏覆盖了我的网页内容：

Chrome/Webview 69 是否支持safe-area-inset-top？

Answer 1

在Chrome 69 中引入了对 env() 常量的支持。尽管我观察到的行为与 iOS 不同。在 iPhone 8 屏幕上没有刘海env(safe-area-inset-top) 等于 20px，而在 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 屏幕上的值是多少，但存在缺口。可能是它缺少状态栏高度。