博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何解决input遇到fixed,absolute布局出现的问题
阅读量:6143 次
发布时间:2019-06-21

本文共 685 字,大约阅读时间需要 2 分钟。

最近在做手机端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

你可能感兴趣的文章