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

相关推荐
影子信息4 小时前
uniapp 日历组件 uni-datetime-picker
前端·uni-app
不知名的前端专家4 小时前
uniapp 安卓FTP上传下载操作原生插件
android·uni-app
2501_9160137411 小时前
iOS 26 系统流畅度检测 从视觉特效到帧率稳定的实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
游戏开发爱好者821 小时前
iOS 26 崩溃日志深度解读,获取方式、系统变动、定位策略
android·macos·ios·小程序·uni-app·cocoa·iphone
郑州光合科技余经理1 天前
微服务架构:基于Spring Cloud ,构建同城生活服务平台
java·spring cloud·微服务·小程序·架构·uni-app
2501_916008891 天前
JavaScript调试工具有哪些?常见问题与常用调试工具推荐
android·开发语言·javascript·小程序·uni-app·ecmascript·iphone
ikun778g1 天前
uniapp设置安全区
前端·javascript·vue.js·ui·uni-app
青衫旧故1 天前
Uniapp Vue2 Vue3常量保存及调用
前端·javascript·vue.js·uni-app
2501_916007472 天前
iOS 混淆与团队协作,研发、安全、运维、测试如何在加固流程中高效配合(iOS 混淆、ipa 加固、协作治理)
android·ios·小程序·https·uni-app·iphone·webview