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