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系统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不同。在没有缺口env(safe-area-inset-top)的iPhone 8屏幕上等于20像素，在Moto G屏幕上也没有缺口的{= 0}等于0。

作为一种解决方法，我正在使用此函数在页面加载后立即将一个类设置为body：

/**
 * 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屏幕上的状态。可能是因为它缺少状态栏的高度。