mirror of
https://github.com/xiangshu233/vue3-vant4-mobile.git
synced 2025-08-09 04:19:46 +08:00
## 问题描述 在Safari和Chrome浏览器中,登录成功后底部的控件(tabbar)不显示,而在UC浏览器中可以正常显示。 ## 解决方案 1. 使用dvh单位替换vh单位,以适应不同浏览器的动态视口高度 2. 为不支持dvh的浏览器提供降级方案,使用calc(100vh - var(--vh-offset)) 3. 添加视口高度处理工具函数,动态计算和更新视口高度偏移量 ## 修改内容 - 修改layout/index.vue中的高度单位 - 修改index.html中的加载动画容器高度 - 添加视口高度处理工具函数 - 在应用启动时初始化视口高度处理 ## 相关issue Closes #38
10 lines
197 B
Plaintext
10 lines
197 B
Plaintext
// 这里定义全局变量
|
|
@primaryColor: #5d9dfe;
|
|
@header-height: 46px;
|
|
@footer-height: 50px;
|
|
|
|
// 视口高度偏移量,用于移动端浏览器地址栏的处理
|
|
:root {
|
|
--vh-offset: 0px;
|
|
}
|