最近在做手机端input,关于吊起系统软键盘遇到一些问题,小米部分手机absolute定位导致页面文档错乱问题,ios手机对页面提示或者弹窗布局问题,先总结如下:
input碰撞的系列火花:
1. input和absolute使用弹起系统输入框,android部分手机压盖问题;
当input无论是absolute还是fixed定位在页面的某一个位置,android手机吊起系统软键盘,掩盖在input元素上方,遮挡住输入框,并不能如ios一般将整个页面弹起;
2. android页面元素定位top,bottom同时使用导致bottom定位元素和top定位元素挤压一团;
鉴于部分android手机压盖问题,可以按照标准文档流的顺序渲染页面结构,尽量不使用定位方式来避免弹起问题;
上述问题本其原因就是系统软键盘弹起,页面容器高度不同设备参照物不同导致;
吊起虚拟键盘,手机定位fixed,absolute处理方式
- android手机,fixed定位识别范围为:图中红色箭头部分也就是设备的 innerheight-键盘高度区域
- ios手机,无论是fixed还是absolute通通都是结构中所有div的总高度;
根据上述表象建议涉及到弹窗提示等,android使用fixed定位,ios使用absolute定位,能避免滑动页面出现提示显示不全等问题;
说了这么多,自己都晕了。。。 1,ios键盘弹起,高度仍然是div的总高度;android计算为红色箭头高度;