style(common/css): 删除冗余的H5端全局样式代码

移除了原先针对H5端的根容器撑满和自定义TabBar固定的冗余注释与样式代码,这些样式逻辑目前可能已被框架内置处理或不再需要,清理样式文件减少冗余代码。
This commit is contained in:
2026-07-15 15:17:23 +08:00
parent 793b988376
commit 1c88bcf99b

View File

@@ -19,73 +19,6 @@ page {
background-color: $color-bg;
}
/* ============================================================
* H5 端根容器撑满兜底
* ------------------------------------------------------------
* 背景:
* 微信小程序 / 鸿蒙元服务:框架编译 page 选择器生效,根容器自带 100% 撑满
* 浏览器 H5:浏览器自动让 html/body 撑满,根容器没问题
* 快应用内嵌 H5: webview 给 H5 报告的 viewport 高度不可控,根容器不撑满 → 背景断色 / 100vh 解析异常
*
* 解决:H5 端显式给 html, body, #app, .uni-app 撑满,确保所有 H5 渲染场景
* (浏览器 H5 / PWA / 桌面 webview / 快应用 webview) 根容器都正确铺满整屏
*
* 注:整段用 #ifdef H5 包裹,微信小程序 / 鸿蒙元服务编译时会移除,
* 不影响小程序原生 tabBar 和页面布局。
* ============================================================ */
/* #ifdef H5 */
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: $color-bg;
overflow: hidden;
-webkit-overflow-scrolling: auto;
}
#app,
.uni-app {
height: 100%;
width: 100%;
min-height: 100%;
background-color: $color-bg;
}
/* ============================================================
* H5 自定义 TabBar 固定在最底端 (浏览器 H5 / 快应用 H5 / PWA)
* ------------------------------------------------------------
* 背景:
* pages.json 的 tabBar 配置了 "custom": true (H5),
* uni-app 在 H5 端会渲染 <uni-tabbar> 自定义组件。
* uni-app 内部已给 uni-tabbar 加了 position:fixed; bottom:0,
* 此处显式加固,防止父级 transform/filter 创建新的 containing block
* 导致 fixed 元素漂移。
* 注:仅 H5 生效,微信小程序 / 鸿蒙元服务走原生 tabBar,不受影响。
* ============================================================ */
uni-tabbar,
.uni-tabbar,
.uni-tabbar--fixed,
.uni-tabbar-bottom {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100% !important;
z-index: 2147483647 !important;
transform: translateZ(0) !important;
-webkit-transform: translateZ(0) !important;
will-change: transform !important;
}
/* 快应用内嵌 H5:webview 可能把 100vh 解析为可视区高度而非屏幕高度,这里提供 JS 兜底 */
.hwapp-full-height {
min-height: 100vh;
}
/* #endif */
:root {
$base-color: #ff4544;
$base-help-color: #ffb644; //辅助颜色