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

相关推荐
Q_Q51100828510 小时前
python+uniapp基于微信小程序的垃圾分类信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
你的眼睛會笑12 小时前
uniapp 鸿蒙元服务 真机调试流程指南
华为·uni-app·harmonyos
2501_9159214314 小时前
查看iOS App实时日志的正确方式,多工具协同打造高效调试与问题定位体系(2025最新指南)
android·ios·小程序·https·uni-app·iphone·webview
雯0609~15 小时前
uni-app:实现快递的节点功能
uni-app
前端小菜鸟也有人起15 小时前
uniapp集成爱山东获取用户信息
uni-app
paradoxaaa_15 小时前
uni-app中表格分页
uni-app
00后程序员张1 天前
HTTP抓包工具推荐,Fiddler配置方法、代理设置与使用教程详解(开发者必学网络调试技巧)
网络·http·ios·小程序·fiddler·uni-app·webview
带着梦想扬帆启航1 天前
UniApp 多个异步开关控制教程
前端·javascript·uni-app
喵喵侠w1 天前
uni-app微信小程序相机组件二次拍照白屏问题的排查与解决
前端·数码相机·微信小程序·小程序·uni-app
2501_915918412 天前
HTTP和HTTPS工作原理、安全漏洞及防护措施全面解析
android·http·ios·小程序·https·uni-app·iphone