android-9.0-pie - 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以防止状态栏覆盖我的 View 。



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



但是当我在 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 屏幕上显示缺口。可能是它缺少状态栏高度。