Android webview 69,env(safe-area-inset-top) not working on Android Pie + WebView 69

问题

I have a fullscreen cordova app, I used to use the css below for iPhone X's notch,

padding-top: 25px;

padding-top: env(safe-area-inset-top);

and Android will ignore env(safe-area-inset-top), and use 25px to prevent the status bar from covering my view.

Here is the thing, I suddenly find out webview support env() after Android System Webview component was upgraded to version 69.0.3497.100 in my Android Oreo phone (Huawei mate10).

But when I install this cordova app in an Android Pie emulator(with cutout simulation enabled and Chrome/Webview 69 installed), I found that env(safe-area-inset-top) is 0px, there is no padding top at all.

The cutout area/statusbar is covering my web content:

Does Chrome/Webview 69 support safe-area-inset-top or not?

回答1:

Support for env() constants was introduced in Chrome 69. Though the behavior, as I observe, is different from iOS. On iPhone 8 screen without notch env(safe-area-inset-top) equals to 20px, while on Moto G screen, without notch as well, it equals to 0.

As a workaround I'm using this function to set a class to body as soon as page loaded:

/**

* 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();

}

And adapted my styles like that:

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;

}

Though I did not check yet what the value of env(safe-area-inset-top) is on Android screen with notch present. It could be that it lacks statusbar height.

来源：https://stackoverflow.com/questions/52476016/envsafe-area-inset-top-not-working-on-android-pie-webview-69