ionic框架的web的键盘显示在安卓uc浏览器上的兼容性问题

ionic框架搭建的web平台,在安卓uc浏览器上,点击输入框,弹出键盘,但是键盘上方还会多出多余的空白,不知道是什么原因。

原生浏览器和QQ浏览器都不会,就uc会。

您可以创建一个ionic的测试项目,加上输入框(输入框要相对低点,在键盘弹出的时候,能引起内容往上推才可以,直接弹出键盘,内容不用移动的情况,没问题),在安卓的uc浏览器上打开,就可以测试了。

我猜想是ionic布局方式的问题,绝对定位布局的关系吧,其他网站不会,我尝试过把<ion-content></ion-content>scroll设为false,自己加上滚动,但还是不行。

附上ionic的地址,ionic

这问题困扰我好久了,一直找不到解决的方法,ionic的论坛肯定没有此解决方法,毕竟这是国产浏览器的兼容性问题。各位如果也遇到此问题,还望能一起讨论。:)

图片描述

阅读 10.5k
3 个回答

可以正对UC浏览器写个判断,把ionic的定位方式由flex改成fixed,就可以了。

这个我找到解决办法了,我给html和body设置不同的颜色,之后我发现是body的部分发生了滚动,解决办法是监听keyboardshow事件,然后设置body的scrollTop

window.addEventListener('native.keyboardshow',eventHandler);
function eventHandler(){
    document.body.scrollTop=0;
    document.documentElement.scrollTop = 0;//兼容不同版本的浏览器
    window.pageYOffset = 0;
}

你可以尝试能不能解决

新手上路,请多包涵

.run(function ($ionicPlatform) {

$ionicPlatform.ready(function () {
    if (window.cordova && window.cordova.plugins.Keyboard) {
         cordova.plugins.Keyboard.disableScroll(true);
    }
});

});
试试上面的代码,即是在run方法里加上cordova.plugins.Keyboard.disableScroll(true),前提是你要装好插件。ng-cordova里面的!!!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题