如何解决input遇到fixed，absolute布局出现的问题

最近在做手机端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计算为红色箭头高度；

转载于:https://juejin.im/post/5b3309556fb9a00e46676a99