Html5（移动端）开发，安卓机上的软键盘顶起影响页面布局
1.可能会出现的bug
一是：页面有输入卡框，在iphone手机上测试，点击输入框时，软键盘弹出，页面正常显示，在安卓机上测试，点击输入框时，软键盘弹出，页面出现压缩
具体压缩现象：
1.当所有元素的高度都设置为百分比，或者vh时，都会被压缩（写死固定值不现实）
2.例如banner区域设有轮播图，软键盘弹起时图片会被压缩，变窄
3.当底部设有button按钮的时候，iphone中不会被顶起，安卓机中会被顶起，很难看，影响用户体验
二是：（我还么有遇到....90%会遇到1的情况，另外10%只会比一好）
2.多说无意，上马感觉
一.css搞法：
1.从页面开始布局的时候就考虑
<body style="position:relative;height:100%;width:100%;">
<div style="height:100%;width:100%;">
<div style="height:300px;">banner---轮播图</div>
<divstyle="height:30px;"><input type="text"/>搜索</div>
<div style="calc(100% - 370px;)">list---列表</div>
<div style="position:absolute;height:40px;">footer---确认按钮</div>
</div>
</body>
顺序是先将body设置为相对定位，再设置footer按钮为绝对定位，此时再设置calculate（100% - 370px），如果可以计算，则css解决成功，如果不可以计算，虽然在安卓机内软键盘弹出时footer不会顶起，但list列表计算不了，也是失败的。如果你此时把body设置为绝对定位，calc可以计算，但footer按钮在安卓机内又可以被顶起，只有上世界上最牛逼的语言来解决了----javascript(项目组同事调侃玩的)。
二.javascript搞法
1.因为是移动端上显示，具体哪款手机屏幕你不知道，所以高度不可能写为固定，只能百分比或者Vh;
2.出现安卓机中的bug是因为安卓机计算的是页面可显示的区域，软键盘那块区域不算，所以在body没有固定的情况下就会压缩、顶起，
3.解决办法，在页面加载完后对body进行固定赋值（px），就是获取当前屏幕的高度
4.方法很多，但选错了就不精确，同样有问题
5.使用document.body.clientHeight;
三.效果图：5s VS 荣耀8