Android webview 69,android-9.0-pie-env(safe-area-inset-top)无法在Android Pie WebView 69上运行

在

Chrome 69中引入了对env()常量的支持.虽然我观察到的行为与iOS不同.在iPhone 8屏幕上没有凹口env(安全区域插入顶部)等于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.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屏幕上的缺点是什么.可能是它缺少状态栏高度.