uni-app 开发H5软键盘会顶起底部内容的解决方案

简单有效的解决办法,通过媒体查询可以纯CSS就解决这个问题。

页面底部内容代码:

html 复制代码
<view class="bot">
    底部内容
</view>

添加CSS代码:

css 复制代码
@media (min-aspect-ratio: 13/20) {
    .bot {
        display: none;
    }
}

原理:通过媒体查询min-aspect-ratio 当屏幕的宽高比大于13/20的时候,就会自动隐藏内容

相关推荐
家里有只小肥猫20 小时前
uniApp打包ios报错
ios·uni-app
jingling55521 小时前
uniapp | 基于高德地图实现位置选择功能(安卓端)
android·前端·javascript·uni-app
某公司摸鱼前端21 小时前
前端一键部署网站至服务器FTP
前端·javascript·uni-app
爱怪笑的小杰杰21 小时前
UniApp 桌面应用实现 Android 开机自启动(无原生插件版)
android·java·uni-app
m0_6470579621 小时前
uniapp使用rich-text流式 Markdown 换行问题与解决方案
前端·javascript·uni-app
木子啊1 天前
Uni-app导航栏适配终极避坑指南
uni-app·自定义导航栏·导航栏
2501_915106321 天前
iOS 如何绕过 ATS 发送请求,iOS调试
android·ios·小程序·https·uni-app·iphone·webview
行走的陀螺仪1 天前
uni-app + Vue3编辑页/新增页面给列表页传参
前端·vue.js·uni-app
森之鸟1 天前
uniapp——配置鸿蒙环境,进行真机调试
华为·uni-app·harmonyos
2501_915918412 天前
常见 iOS 抓包工具的使用,从代理抓包、设备抓包到数据流抓包
android·ios·小程序·https·uni-app·iphone·webview