xuchao/h5-meike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 列表图片不显示 + 宽屏居中（实测修正）

Browse Source 
实测发现的真正问题：uni-image 内部填充元素缺宽高100%，高度塌成0，导致列表图片不显示或溢出卡片，这才是"图片没适配"的根因，补全局样式修复；本HBuilderX版本把rpx编译成按加载视口生成的固定px，大于768px时框架已自带把基准锁在375的响应式机制，之前误用zoom反而二次缩小，已移除；宽屏居中改用 uni-page-body 宽750rpx加important与margin auto，覆盖框架默认宽100%，两侧露出底色；跨768阈值缩放窗口时重载一次，让px基准与视口一致；悬浮球宽屏阈值同步改为769；删除index.html里vite残留的module script（控制台报错）。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
xuchao
2026-07-21 10:30:28 +08:00
co-authored by Claude Opus 4.8
parent f767aa93de
commit a800756958
4 changed files with 42 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.vue
+39 -6
View File
@@ -1,7 +1,28 @@
<script> <script>
// #ifdef H5
// xuchao: 宽屏适配 —— 本 HBuilderX 版本自带"宽屏锁定 375 基准"的响应式机制（>768px 生效），
// 桌面加载时整页已是手机尺寸但默认贴左。这里只补两件事：
// 1) 宽屏下把页面列居中（见样式）；
// 2) 跨越 768 阈值缩放窗口时重载一次，让 px 基准与当前视口一致。
let _wide = null
function adaptWideScreen() {
const w = document.documentElement.clientWidth
const wide = w > 768
if (_wide !== null && _wide !== wide) {
location.reload()
return
}
_wide = wide
}
// #endif
export default { export default {
onLaunch: function(e) { onLaunch: function(e) {
console.log('App Launch') console.log('App Launch')
// #ifdef H5
adaptWideScreen()
window.addEventListener('resize', adaptWideScreen)
// #endif
}, },
onShow: function() { onShow: function() {
console.log('App Show') console.log('App Show')
@@ -17,18 +38,30 @@
@import "./unit/font/index.css"; @import "./unit/font/index.css";
/* #ifdef H5 */ /* #ifdef H5 */
// xuchao: 宽屏适配 —— 配合 pages.json 的 rpxCalcMaxDeviceWidth（宽屏时 rpx 基准锁定 375px）， // xuchao: 修复 uni-image 内部填充元素宽高为 0 导致图片不显示/溢出
// 页面容器居中展示，两侧露出底色形成"手机框"视觉 uni-image {
@media screen and (min-width: 751px) { display: inline-block;
overflow: hidden;
}
uni-image > div,
uni-image > img {
width: 100%;
height: 100%;
}
// xuchao: 宽屏（>768px，框架此时把 rpx 基准锁在 375）下，把页面列居中、两侧露出底色
@media screen and (min-width: 769px) {
body { body {
background: #dfe4ea; background: #dfe4ea;
} }
uni-page-body { uni-page-body {
width: 750rpx; // xuchao: !important 覆盖框架默认 width:100%，宽屏下把页面列收为 375 并居中
margin: 0 auto; width: 750rpx !important;
margin: 0 auto !important;
min-height: 100vh; min-height: 100vh;
box-shadow: 0 0 80rpx rgba(31, 45, 61, 0.16); box-shadow: 0 0 60rpx rgba(31, 45, 61, 0.14);
} }
} }
/* #endif */ /* #endif */
components/gmy-float-touch/gmy-float-touch.vue
+2 -2
View File
@@ -188,8 +188,8 @@
} }
/* #ifdef H5 */ /* #ifdef H5 */
// xuchao: 宽屏时页面列居中（375px），悬浮球及菜单同步锚定到列左缘，避免脱离页面 // xuchao: 宽屏（>768px）时页面列居中（375px），悬浮球及菜单同步锚定到列左缘，避免脱离页面
@media screen and (min-width: 751px) { @media screen and (min-width: 769px) {
.box { .box {
left: calc(50vw - 184px) !important; left: calc(50vw - 184px) !important;
} }
index.html
-1
View File
@@ -15,6 +15,5 @@
</head> </head>
<body> <body>
<div id="app"><!--app-html--></div> <div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body> </body>
</html> </html>
pages.json
+1 -4
View File
@@ -69,9 +69,6 @@
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
"navigationBarTitleText": "质惠游", "navigationBarTitleText": "质惠游",
"navigationBarBackgroundColor": "#ffffff", "navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#ffffff", "backgroundColor": "#ffffff"
// xuchao: 宽屏适配 —— 窗口超过 750px 时 rpx 换算基准锁定为 375px（手机尺寸），不随屏幕拉大
"rpxCalcMaxDeviceWidth": 750,
"rpxCalcBaseDeviceWidth": 375
} }
} }