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

news/2024/7/24 11:34:04 标签: 移动开发

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


http://www.niftyadmin.cn/n/1374709.html

相关文章

tomcat源码分析(第一篇 从整体架构开始)

作为一款开源的轻量级的jsp服务器软件,tomcat是使用最广泛的web服务器之一。tomcat源码用Java编写,研读tomcat源码,向大师学习编程思想,还是会有不少收获。 一、tomcat总体架构 宏观角度来看,tomcat可以分为两大块&…

数据中心架构

2019独角兽企业重金招聘Python工程师标准>>> 数据中心是企业的业务系统与数据资源进行集中、集成、共享、分析的场地、工具、流程等的有机组合。从应用层面看,包括业务系统、基于数据仓库的分析系统;从数据层面看,包括操作型数据和…

unity打成aar上传到maven库的工具

需求: 把unity打成aar并上传到maven库 其实就是把前两个博客整合了一下 unity打aar包工具 aar上传maven库工具 这里先说eclipse版的 package com.jinkejoy.build_aar;import java.awt.FlowLayout; import java.awt.event.ActionEvent; import java.awt.event.Action…

关于Java文件路径问题

1.如何获得当前文件路径 常用: 字符串类型:System.getProperty("user.dir"); 综合: package com.zcjl.test.base; import java.io.File; public class Test { public static void main(String[] args) throws Exception { …

关于Maven在编译的时候出现不能打开zip FIle的error

1、首先介绍开发环境: 我用的是Mave2.1,JDK1.7,安装了Svn的客户端程序和Subversion,在项目中我用的是以前的Maven库,默认的是C盘下当前用户的.m2/respository目录, 偶在编译的过程中出现了以下的错误: 2、错误信息如下&#xff1…

安吉尔A3净水器——健康饮水新搭档!

现代人对于高配置的科技产品,越来越热衷。小到高配置门锁,大到高配置厨房,各种各样的高配置产品已经渐渐的融入到了我们的生活中。例如下面这款跟我们生活息息相关的高配置净水器——安吉尔A3净水器,我们健康生活饮水新搭档。安吉…

关于Java.net.URL对象使用Proxy访问Internet资源

最近在做项目的过程中遇到了以下的问题,在跑下面这段代码的时候: url.openConnection().getInputStream(); 跑出了一个连接超时的异常,经过详细的检查,发现问题是因为我在局域网 访问Internet的资源的时候是通过代理服务器上网的…

【Absible学习】Ansible常用模块---包管理模块

yum_repository模块yum_repository模块可以管理远程主机上的yum仓库。 模块参数 参数说明name必须参数,用于指定要操作的唯一的仓库ID,也就是".repo"配置文件中每个仓库对应的"中括号"内的仓库IDbaseurl设置yum仓库的baseurldescrip…