xuchaoandClaude Opus 4.8
a800756958
实测发现的真正问题：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>
69 lines
1.7 KiB
Vue
69 lines
1.7 KiB
Vue
<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 {
|
|
onLaunch: function(e) {
|
|
console.log('App Launch')
|
|
// #ifdef H5
|
|
adaptWideScreen()
|
|
window.addEventListener('resize', adaptWideScreen)
|
|
// #endif
|
|
},
|
|
onShow: function() {
|
|
console.log('App Show')
|
|
},
|
|
onHide: function() {
|
|
console.log('App Hide')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "uview-ui/index.scss";
|
|
@import "./unit/font/index.css";
|
|
|
|
/* #ifdef H5 */
|
|
// xuchao: 修复 uni-image 内部填充元素宽高为 0 导致图片不显示/溢出
|
|
uni-image {
|
|
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 {
|
|
background: #dfe4ea;
|
|
}
|
|
|
|
uni-page-body {
|
|
// xuchao: !important 覆盖框架默认 width:100%，宽屏下把页面列收为 375 并居中
|
|
width: 750rpx !important;
|
|
margin: 0 auto !important;
|
|
min-height: 100vh;
|
|
box-shadow: 0 0 60rpx rgba(31, 45, 61, 0.14);
|
|
}
|
|
}
|
|
/* #endif */
|
|
</style>
|