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

概述:本篇文章针对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,同时也要注意父级标签的设置:

一般简单设置这些即可

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

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

记录一下初始高度

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

相关推荐
booboosui8 小时前
Android 上来电怎么判:7 个条件加 5 个中文词
android
MardaWang8 小时前
App 内嵌 H5 的信任边界设计(ArkWeb/HarmonyOS 实战)
android
石头慢慢说8 小时前
不写 XPath,让 AI 在真机上跑测试:Appium MCP 全流程实战
android
90后的晨仔10 小时前
解决 Android 构建报错:Unable to delete file .../file-map.txt
android·前端
mg66811 小时前
安卓玩机工具----安卓手机变成桌面电脑!多窗口镜像+音频投射+游戏操控,无需 Root
android·智能手机·电脑
peakmain911 小时前
异常处理 - Native 层的崩溃捕获机制及实现 (一)
android·性能优化
木头左12 小时前
【Android】听写播放器改版:中英文书写速度拆项与「正在读」高亮
android·room·media3·jetpack compose·听写
好的佩奇13 小时前
Dart 之方法、操作符与可调用对象
android·flutter·dart
恋猫de小郭13 小时前
Flutter Impeller Vulkan 内存持续上涨,问题没想到是文字阴影
android·前端·flutter