已经用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的高度没有(像之前一样)被压缩和降低,而是正常的(保持不变)