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的时候,就会自动隐藏内容

相关推荐
Rysxt_11 小时前
uni-app x 教程:下一代跨平台开发框架
uni-app·uni-app x
游戏开发爱好者815 小时前
2025年iOS应用上架App Store全指南,开发者必看
android·ios·小程序·https·uni-app·iphone·webview
集成显卡15 小时前
CVE检索工具 | 开发一款检索漏洞信息的小程序
网络安全·小程序·uni-app·cve·漏洞信息
jaqi.l16 小时前
uni-app 小程序全局挂载分享功能,并动态配置页面是否可以分享
vue.js·小程序·uni-app
2501_9151063218 小时前
HBuilderX 项目上架 iOS app上架 App Store 的关键流程
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063218 小时前
iOS 文件管理,在不越狱的前提下管理 iPhone / iPad 文件
android·ios·小程序·uni-app·iphone·webview·ipad
能c能v18 小时前
uniapp+JPush(极光推送) 华为厂商离线接收不到通知问题。
华为·uni-app
万物得其道者成18 小时前
uni-app 触底加载和下拉刷新完整实现指南
uni-app
酒醉的胡铁18 小时前
uniapp运行到鸿蒙没有反应或者一直运行方式:打开 undefined, 导入 dist\dev\.app-harmony 运行
华为·uni-app·harmonyos
tianxinw18 小时前
uniapp x + vue3 实现echarts图表
前端·uni-app·vue·echarts