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来防止状态栏覆盖我的视图。

就是这样，我env()在Android Oreo手机（华为mate10）中将Android系统Webview组件升级到版本69.0.3497.100后，突然发现对Webview的支持。

但是，当我在Android Pie仿真器中安装此cordova应用程序时（启用了抠图仿真并安装了Chrome / Webview 69），我发现它env(safe-area-inset-top)为0px，根本没有填充顶部。

抠图区域/状态栏覆盖了我的Web内容：

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

Answer 1

Chrome 69中引入了对env（）常量的支持。尽管据我观察，这种行为与iOS不同。在iPhone 8屏幕上，无缺口env(safe-area-inset-top)等于20px，而在Moto G屏幕上，也无缺口等于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屏幕的价值。可能是缺少状态栏高度。