安卓手机键盘谈起页面背景被压缩解决方案:

概述:本篇文章针对H5页面开发中键盘弹起,页面使用背景图,屏幕可视高度变小,遇到的不同设备的兼容性问题(安卓键盘弹弹出背景被压缩的问题以及苹果手机底部留白问题)

1,单独设置一个div用来存放页面背景

2,当前div设置如图所示

复制代码
 .page_bg{
      position: fixed; /* 固定定位,相对于浏览器窗口 */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* 关键:这里的高度是视口高度 */
      /* 针对 iOS 的兜底:强制最小高度为屏幕物理高度 */
      min-height: 100vh; 
      background: url('~@/assets/img/home/loginOrRegister/wechat_bg.png') no-repeat;
      background-size: cover;
      z-index: -1; /* 放在最底层 */
  }

3,同时也要注意父级标签的设置:

一般简单设置这些即可

如果还不行可以试试添加如下方案

输入框聚焦的时候也就是键盘弹起的时候不要更新页面高度

记录一下初始高度

页面中父级标签使用如下这些配置即可

相关推荐
天空之城--1 小时前
Android Koin 完全指南:从原理到实践
android
zhangphil2 小时前
Android main thread主线程Choreographer doFrame发生FullSuspendCheck
android
TimeFine6 小时前
智能眼镜开发:获取真实的音频路由
android
pengyu6 小时前
【Kotlin 协程修仙录 · 渡劫境 · 中阶】 | 造化神兵:自定义 CoroutineDispatcher 与调度器的终极定制
android·kotlin
pengyu6 小时前
【Kotlin 协程修仙录 · 渡劫境 · 初阶】 | 飞升雷劫:CPS 变换与挂起函数字节码终极透视
android·kotlin
TimeFine6 小时前
智能眼镜开发:眼镜Touch后收音与触发播放系统音乐的矛盾处理
android
TimeFine7 小时前
智能眼镜开发:眼镜侧收集音频
android
又见情义7 小时前
Android 系统设置从平板版迁移至TV版实践
android
杉氧10 小时前
打破边界(一):实战编写 Android/iOS 原生模块 (Native Modules)
android·react native·前端框架