10

我有一个全屏科尔多瓦应用程序，我曾经使用下面的 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 System Webview组件升级到69.0.3497.100版本后，突然发现webview支持。

在此处输入图像描述

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

在此处输入图像描述

在此处输入图像描述

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

在此处输入图像描述

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

4

1 回答 1

6

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

于 2018-10-19T20:06:02.883 回答