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
Android webview 69,env(safe-area-inset-top) not working on Android Pie + WebView 69相关推荐
- 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 ...
- iPhoneX安全区域与H5引发的问题(Safe Area)
iPhoneX安全区域引发的问题(Safe Area) 瞧一瞧 LeetCode题解:Gitbook版本传送门 前端笔记:Gitbook传送门 目录 什么是安全区域? 预留出Home Indicato ...
- android webview 劫持,安卓包风险安全监测提示存在Activity劫持、WebView远程代码执行,请问怎么解决?...
挺着急的,请问这个怎么解决 1.Activity劫持 用例名称:Activity劫持 风险系数:高 风险编号:NESUN-2016-82091, CWE-94, 风险描述:攻击者劫持目标Activit ...
- html5苹果x底部满屏,iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配...
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 前言 在苹果 iPho ...
- iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 本文目录 前言 ...
- xx.xib: error: Illegal Configuration: Safe Area Layout Guide before iOS 9.0报错问题解决
之前是用xcode8.3.3创建的工程最近升级到Xcode9.0 遇见了这个问题 在Xcode 9.0以上 新建xib文件会报错 xx.xib: error: Illegal Configuratio ...
- 如何设计一个优雅健壮的Android WebView?(上) 基于考拉电商平台的WebView实践
前言 Android应用层的开发有几大模块,其中WebView是最重要的模块之一.网上能够搜索到的WebView资料可谓寥寥,Github上的开源项目也不是很多,更别提有一个现成封装好的WebView ...
- Android使用webview怎么加载uri_【网安学术】Android移动应用跨域攻击检测
摘要:WebView组件作为移动应用内置的浏览器,用于加载和显示web页面.由于在使用WebView组件时,存在设置不当而引起WebView跨域访问漏洞,使用户的敏感应用数据受到了克隆攻击.因此,对由 ...
- 我的Android进阶之旅】GitHub 上排名前 100 的 Android 开源库进行简单的介绍
GitHub Android Libraries Top 100 简介 本文转载于:https://github.com/Freelander/Android_Data/blob/master/And ...
最新文章
- linux目录默认权限是什么,linux文件目录默认权限(详解)
- 传统公司部署OpenStack(t版)简易介绍(七)——cinder模块部署
- 服务器里的文件链接地址怎么写,服务器里的文件链接地址怎么写
- 【大数据部落】混合IBCF协同过滤推荐算法推荐引擎的探索1
- 二维数组绑定到Dropdownlist
- 移动手机病毒编年史(Cabir、Skulls、FakePlayer、HummingBad)
- V20变频器手自动切换(就地远程切换)的具体方法示例
- 经典论文之OverFeat
- 2019年系统架构设计师考试--从备考到拿证
- win10 子系统之 Ubuntu,解放你的生产力
- 2020年2月12日学习记录
- 按键手机怎么装java_怎样把USB键盘接到Android手机上
- Android音频子系统(十一)------耳机返听(耳返)原理实现
- js内容混淆,返回内容加密
- ERP的五大核心思想
- Java中ASC码与字符互相转换
- 5. 项目管理之范围管理
- 处理液晶的光电效应画图代码
- PowerShell学习入门 - 4
- 【速览】2021年中国番石榴主产地种植生产情况及整体进出口贸易分析[图]