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

概述我有一个全屏的cordova应用程序,我曾经使用下面的CSS来获取iPhone X的缺口, padding-top: 25px;padding-top: env(safe-area-inset-top); Android将忽略env(safe-area-inset-top),并使用25px来阻止状态栏覆盖我的视图. 这是事情,在我的Android Oreo手机(华为mate10)中将Androi 我有一个全屏的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是否支持安全区域嵌入式顶部？

解决方法 在 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 ></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屏幕上的缺点是什么.可能是它缺少状态栏高度.

总结

以上是内存溢出为你收集整理的android-9.0-pie-env(safe-area-inset-top)无法在Android Pie WebView 69上运行全部内容，希望文章能够帮你解决android-9.0-pie-env(safe-area-inset-top)无法在Android Pie WebView 69上运行所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。