300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > android 键盘上方浮动 【已解决】点击input输入框时Android端底部的Tab弹出显示在键盘上方...

android 键盘上方浮动 【已解决】点击input输入框时Android端底部的Tab弹出显示在键盘上方...

时间:2022-07-14 20:57:22

相关推荐

android 键盘上方浮动 【已解决】点击input输入框时Android端底部的Tab弹出显示在键盘上方...

已经用Preact实现H5页面的移动端app了

iOS和Android分别是原生app去打包加了个壳,内部用Webview去加载H5页面

现在遇到一个问题:

Android端,对于input输入框来说,点击后键盘从底部弹出

但是结果原先在app底部的tab也浮动到键盘上面了,折腾了部分内容,影响输入:

注:iOS不存在此问题:

然后对于整个tab导航栏的div的position从fixed改为absolute:

结果:

问题依旧。

android webview 输入法遮挡

android webview input method

android webview position fixed move up

看起来像是:android中的webview对于position:fixed 有bug?

user-scalable改为no,就可以了?

去试试,问题依旧。

android webview div fixed move up when keyboard show

继续调试:

感觉是:

当android的显示键盘是,底部的边缘就上移了。

-》所以即使上述的bottom为0,所以也还是会上浮

-〉而整个页面的高度,并没有受影响

加上!important:

.wrapper {

// position: fixed;

position: absolute !important;

看看结果如何

问题依旧:

感觉是:

当键盘弹出时,整个webview的高度都减少了

-》所以android远程调试的左边webview的页面的高度就减少了,都看不到键盘

android keyboard show webviewheight

android keyboard show reduce pageheight

android keyboard reduce pageheight

android webview keyboard

android WebKit keyboard

android WebKit keyboard page move up

让原生app的壳中把相关代码改为:

android:windowSoftInputMode="adjustPan"

或:

android:windowSoftInputMode=“adjustNothing"

看看结果

结果就是:

【总结】

不需要改动webkit相关的代码,而是去把android的原生代码改为:

android:windowSoftInputMode="adjustPan"

后,就可以了:

在点击了input弹出键盘后:

android手机端截图:

Mac中Chrome调试的效果是:

从上图可见:

在键盘弹出后,原先的WebKit的高度没有(像之前一样)被压缩和降低,而是正常的(保持不变)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。