status bar显示灰色长条未透明显示,manifest.json中设置statusbar: true没效果,若在页面的meta节点content属性值中添加viewport-fit=cover时,当该页面有输入框时,点击输入框弹出键盘时,页面会整体上移且出现黑色背景,请问该问题如何解决。
=====================分割=======================
iPhone 6s 调试
效果图:
status bar显示灰色长条未透明显示,manifest.json中设置statusbar: true没效果,若在页面的meta节点content属性值中添加viewport-fit=cover时,当该页面有输入框时,点击输入框弹出键盘时,页面会整体上移且出现黑色背景,请问该问题如何解决。
=====================分割=======================
iPhone 6s 调试
效果图:
你iphone6s系统是多少,其他手机有这个问题吗? 我测试的iphone6s模拟器没有你描述的问题出现,我这没有iphone6s手机没发测试。manifest.json的配置参考文档:http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/94
我的6S+XS+XSMAX,IOS12+,都有这个问题。影响到窗口的弹跳,偶尔出现Webview的内容容器块都是黑色。这个问题的出现,是在官方升级了适配刘海屏之后。原本我们APP结构是沉浸式,自己适配过刘海屏,增加过viewport-fit=cover,在viewport-fit=cover之下,softinputMode: "adjustResize"失效。假如不使用viewport-fit=cover并且不自主适配刘海屏,这个黑背景块问题就不存在。目前softinputMode: "adjustResize"失效,软键盘弹出整个窗口会上移弹跳然后归位,弹跳过程中出现黑色背景,通常窗口首次激活软键盘,都不能归位,留下大概20PX高度的黑色背景块。体验非常差。
2019-03-01 13:00
我的6S+XS+XSMAX,IOS12+,都有这个问题。影响到窗口的弹跳,偶尔出现Webview的内容容器块都是黑色。这个问题的出现,是在官方升级了适配刘海屏之后。原本我们APP结构是沉浸式,自己适配过刘海屏,增加过viewport-fit=cover,在viewport-fit=cover之下,softinputMode: "adjustResize"失效。假如不使用viewport-fit=cover并且不自主适配刘海屏,这个黑背景块问题就不存在。目前softinputMode: "adjustResize"失效,软键盘弹出整个窗口会上移弹跳然后归位,弹跳过程中出现黑色背景,通常窗口首次激活软键盘,都不能归位,留下大概20PX高度的黑色背景块。体验非常差。安卓没有这个问题。
设置了沉浸式
"kernel": { "ios": "Webview"},
"statusbar" : { "immersed" : true, "style" : "dark", "background" : "#FFFFFF"},
修改了meta
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
添加了
mui.plusReady(function() {
plus.webview.currentWebview().setStyle({softinputMode: "adjustResize"});
})
全局使用了适配刘海屏判断,获取不同的外部CSS
if(window.plus){
//刘海屏适配
if(plus.navigator.hasNotchInScreen()){
var css = plus.io.convertLocalFileSystemURL("/css/notch.css");
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.type='text/css';
link.rel = 'stylesheet';
link.href = css;
head.append(link);
}else{
//alert('此设备不是刘海屏');
};
}else{// 兼容老版本的plusready事件
document.addEventListener('plusready',function () {
//刘海屏适配
if(plus.navigator.hasNotchInScreen()){
var css = plus.io.convertLocalFileSystemURL("/css/notch.css");
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.type='text/css';
link.rel = 'stylesheet';
link.href = css;
head.append(link);
}else{
//alert('此设备不是刘海屏');
};
},false);
}
以上情况,除了软键盘弹出改动窗口尺寸时出现半屏的黑色背景块以外。个别窗口页面在首次渲染窗口时,比如首页,在关闭启动页之后,窗口渲染偶尔会出现窗口黑色背景,需要滑动窗口而不是body,才会恢复正常。
现在的解决方法,就是要整个APP500多个页面,把以前自主适配刘海屏的代码删除,不使用viewport-fit=cover,这个黑色背景块就不存在,窗口也不弹跳,但顶部导航是普通的浮动导航,顶部导航在软键盘弹出时会闪现。