Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

style(common/css): 修复快应用内嵌H5根容器不撑满问题

Browse Source 
针对快应用内嵌H5场景下webview viewport高度不可控导致根容器无法铺满整屏的问题，添加H5端显式撑满容器的样式兜底，同时保留微信小程序/鸿蒙元服务的原有编译逻辑
This commit is contained in:
ZF Sun
2026-07-14 16:30:31 +08:00
parent fa082f59c1
commit 52f952a6df
1 changed files with 35 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
common/css/main.scss
View File

@@ -19,6 +19,41 @@ 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 包裹,微信小程序 / 鸿蒙元服务编译时会移除这一段
* ============================================================ */
/* #ifdef H5 */
html,
body {
height: 100%;
min-height: 100vh;
margin: 0;
padding: 0;
background-color: $color-bg;
}
#app,
.uni-app {
min-height: 100%;
background-color: $color-bg;
}
/* 快应用内嵌 H5:webview 可能把 100vh 解析为可视区高度而非屏幕高度,这里提供 JS 兜底 */
.hwapp-full-height {
min-height: 100vh;
}
/* #endif */
:root {
$base-color: #ff4544;
$base-help-color: #ffb644; //辅助颜色