zoukankan      html  css  js  c++  java
  • ios下input focus弹出软键盘造成fixed元素位置移位

    正常状态下

     

    input focus软键盘弹出时

    问题描述:

    头部结构fixed,滚动到下部内容区域,input、textarea等focus弹出软键盘时,头部位置偏移被居中(该问题ios7 beta3已修复),当软键盘关闭时,头部结构位置又恢复正常

    安卓手机下,fixed表现要比ios好,不会出现此问题

    然而在移动端里,基本上所有手机,页面滚动的时候,任何js都不会执行,所以寻找css的方法(且js方法比较消耗性能)

    各类大网站的解决方法:一般是页面上避免悬挂元素,或者有悬挂元素时,避免产生软键盘弹出事件

    目前css的解决方法:

    头部依旧fixed,中间有input、textarea等部分也fixed,width:100%,top值为顶部高度,bottom:0(如果顶部也fixed,则bottom值为底部高度),overflow:scroll

    缺点:体验差,有卡顿感,且虽然也能滚动,但是手机上显示不出滚动条。

    如果你有更好的解决方法,欢迎指点

  • 相关阅读:
    Ztree
    WebAPI
    数据传输
    jqyery+ajax 提交表单
    初试 MVC+Boostrap
    CSV 导入SQL Server 中
    10-C语言循环结构(一)
    Linux测试语句(test)
    C 链表
    C递归
  • 原文地址:https://www.cnblogs.com/zhangwenkan/p/4422576.html
Copyright © 2011-2022 走看看