移动端h5开发,华为手机输入法键盘影响页面布局的问题。

在做移动端h5的时候，有些简单的页面，我们一般都会给body写上：

width:100%;
height:100%;

然后给一个满屏的背景图，简单方便的适应不同屏幕的手机。

有时候为了采集用户信息，页面上会放置几个input框让用户填写，那么问题就来了。
如图，一个100%布局的页面，上面有一个input

在input没有获得焦点(即没有弹出输入法)的时候,我们的华为手机和其他机型表现的都很完美

这是iphone的样式

别高兴的太早，我们点击input试试看

看起来Iphone好像也没什么问题,input获得了焦点,页面自动滚动到了合适的位置,将input正好置于页面的中间(请忽略那个安全警告,快下班了,截图截的很心急….)
那我们再来看看华为:

what the xxxx?整个页面感觉像被输入法给挤扁了，由于此时我的input是垂直&&水平居中的，所以跟随着被挤扁的body一起上来了，页面也不能滚动。
如果在实际场景中input使用top定位，则很有可能出现这种情况

果然，body已经装不下input了,是什么导致了这种情况？
借助vconsole工具看了一下，window,document,body,input等的容器的高度都没有发生变化,clientHeight,offsetHeight等的属性值也没有发生改变,暂且只能认为:

输入法的弹出并没有实际影响页面元素的数值,只是改变了屏幕的显示方式

所以看上去很扁的页面，实际上没有任何改变，如果有哪位大神深入研究过这个问题也请不吝赐教,但是话说回来，要怎么解决这个问题？

与上面的那个不一定正确的结论相悖的是:

如果在input获得焦点时，手动给body重新赋值，可以达到解决问题的效果

var h = window.innerHeight;
var myInput = document.getElementById('myInput');myInput.addEventListener('focus',handler,false);function handler(){$('body').height(h);
}

效果如下：

跟iphone上一样，input获得了焦点,页面自动滚动到了合适的位置,将input正好置于页面的中间。(这里的input是top定位，距离写死)

如果你使用的是bottom或者top距离使用的百分比,那么又会出问题,虽然看起来页面没有被挤扁，但是input的位置会改变,需要注意

不止输入法，部分华为机型屏幕下边会有虚拟键，也会产生类似的改变页面布局问题，我这里没有这些手机，不再贴图。

在面对华为用户时谨慎使用bottom定位以及百分比数值定位!
在面对华为用户时谨慎使用bottom定位以及百分比数值定位!
在面对华为用户时谨慎使用bottom定位以及百分比数值定位!

三遍!!!

移动端h5开发,华为手机输入法键盘影响页面布局的问题。相关推荐

在移动端H5开发中(关于安卓端position:fixed和position:absolute；和虚拟键盘冲突的问题，以及解决方案)
在移动端H5开发中(关于安卓端position:fixed和position:absolute:和虚拟键盘冲突的问题,以及解决方案) 参考文章: (1)在移动端H5开发中(关于安卓端position: ...
内存占用小的手机输入法_华为手机输入法中6个超实用的小技巧，你没用过就太可惜了！...
阅读本文前,请您先点击上面蓝色字体"财经史"再点击"关注",这样您就可以免费收到我们的最新内容了,每天都会有更新,完全是免费订阅,请放心关注. 想必大家对华为手 ...
华为linux输入法,华为手机输入法设置
华为手机输入法设置点击应用程序,然后点设置,找到应用程序选项点击进入,点击语言和键盘设置,这时候我们会看到输入法模式,点击后面的三角号然后选择要用的输入法就可以了.以下内容是小编为您精心整理的华为手 ...
华为怎么改输入法皮肤_怎么设置华为手机输入法皮肤
怎么设置华为手机输入法皮肤导读:小编根据大家的需要整理了一份关于<怎么设置华为手机输入法皮肤>的内容,具体内容:大家知道手机输入法的皮肤是可以更换的吗?小编用的手机是华为的,手机默认输入 ...
华为linux输入法,华为手机输入法隐藏7大不为人知的功能，非常规操作，实用又强大！...
原标题:华为手机输入法隐藏7大不为人知的功能,非常规操作,实用又强大! 你只用华为手机输入法打字?这些隐藏的黑科技功能,如果你还不知道,那就实在是太可惜了,这些非常规操作实用又强大!一起来了解一下吧. ...
html5 拖拽滚动条,js 简易版滚动条实例(适用于移动端H5开发)
废话不多说,直接上代码滑动条 *{ margin: 0; padding: 0; } #content{ margin-top: 50px; width:100%; height: 200px; b ...
华为手机拨号键盘还能这样玩？而你却只知道用来打电话，太浪费了
华为手机真是越来越厉害了,就拿拨号键盘来说,里面竟然还隐藏着这么多的实用功能.真的是超乎想象!只是很少有人发现而已,一起来看看吧,我相信你一定也会感到惊讶的. 1.快速将手机设置为空号相信很多小伙伴都 ...
h5页面键盘弹出影响页面布局（兼容）
其实弹框之所以影响页面布局,我碰到的一般都是因为页面时position:fixed时,键盘一弹出,布局就乱了,我的解决方案是,首先就是把fixed尽可能的改成其他的,接着监听窗口大小变化事件,然后处理 ...
WPF 项目开发入门（二） WPF 页面布局
WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式与 TreeView树组件 ...

移动端h5开发,华为手机输入法键盘影响页面布局的问题。

移动端h5开发,华为手机输入法键盘影响页面布局的问题。相关推荐

最新文章

热门文章