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

fix: 设备适配 —— 宽屏居中锁定手机尺寸 + 全面屏底部安全区

Browse Source 
宽屏（桌面/平板）：
- pages.json 配置 rpxCalcMaxDeviceWidth=750/rpxCalcBaseDeviceWidth=375，
  窗口超过 750px 时 rpx 换算基准锁定为 375px（uni-app 官方机制），不再随屏幕拉伸
- 页面列宽 750rpx 居中展示，两侧露出底色+阴影形成手机框视觉
- 固定底栏统一 left/right:0+margin:auto 视口居中，与页面列对齐
- 悬浮球及菜单项宽屏时锚定到页面列左缘

全面屏（iPhone 刘海屏）：
- 订单底栏/订单详情按钮栏/弹窗确认栏用同色边框向下延伸覆盖 home 指示条区域
- 悬浮按钮（完成/选择）整体上移避开安全区
- 确认订单页底栏改为 bottom 锚定（原来用 JS 计算 top）

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
xuchao
2026-07-21 08:57:40 +08:00
co-authored by Claude Opus 4.8
parent 4190565eb7
commit f767aa93de
7 changed files with 67 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.vue
+19 -2
View File
@@ -13,6 +13,23 @@
</script>
<style lang="scss">
@import "uview-ui/index.scss";
@import "./unit/font/index.css";
@import "uview-ui/index.scss";
@import "./unit/font/index.css";
/* #ifdef H5 */
// xuchao: 宽屏适配 —— 配合 pages.json 的 rpxCalcMaxDeviceWidth（宽屏时 rpx 基准锁定 375px），
// 页面容器居中展示，两侧露出底色形成"手机框"视觉
@media screen and (min-width: 751px) {
body {
background: #dfe4ea;
}
uni-page-body {
width: 750rpx;
margin: 0 auto;
min-height: 100vh;
box-shadow: 0 0 80rpx rgba(31, 45, 61, 0.16);
}
}
/* #endif */
</style>
components/gmy-float-touch/gmy-float-touch.vue
+17
View File
@@ -186,4 +186,21 @@
right: 20upx;
transition: top 0.2s, right 0.2s, opacity 0.2s;
}
/* #ifdef H5 */
// xuchao: 宽屏时页面列居中（375px），悬浮球及菜单同步锚定到列左缘，避免脱离页面
@media screen and (min-width: 751px) {
.box {
left: calc(50vw - 184px) !important;
}
.menu0, .menu0R {
left: calc(50vw - 184px) !important;
right: auto !important;
}
.menu4, .menu4R {
left: calc(50vw - 134px) !important;
right: auto !important;
}
}
/* #endif */
</style>
pages.json
+4 -1
View File
@@ -69,6 +69,9 @@
"navigationBarTextStyle": "black",
"navigationBarTitleText": "质惠游",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#ffffff"
"backgroundColor": "#ffffff",
// xuchao: 宽屏适配 —— 窗口超过 750px 时 rpx 换算基准锁定为 375px（手机尺寸），不随屏幕拉大
"rpxCalcMaxDeviceWidth": 750,
"rpxCalcBaseDeviceWidth": 375
}
}
pages/ticket/orderdetail.vue
+8 -1
View File
@@ -167,7 +167,7 @@
<u-parse style="margin-top: 24rpx;" :html="obj.sku.refundPolicy"></u-parse>
<view style="width: 654rpx;height: 120rpx;"></view>
<view
style="width: 654rpx;position: fixed;height: 88rpx;line-height: 88rpx;background: #fff;bottom: 0rpx;">
style="width: 654rpx;position: fixed;height: 88rpx;line-height: 88rpx;background: #fff;bottom: 0rpx;left: 0rpx;right: 0rpx;margin: 0 auto;border-bottom: constant(safe-area-inset-bottom) solid #fff;border-bottom: env(safe-area-inset-bottom) solid #fff;">
<u-button shape="circle" size="default"
style="background: linear-gradient(180deg, #FF9E49 0%, #ED3B1A 100%);color: #fff;"
@click="show1=false">确定</u-button>
@@ -488,6 +488,13 @@
background-color: #fff;
position: fixed;
bottom: 0rpx;
// xuchao: 视口水平居中（宽屏下与页面列对齐）+ 全面屏底部安全区
left: 0rpx;
right: 0rpx;
margin-left: auto;
margin-right: auto;
border-bottom: constant(safe-area-inset-bottom) solid #fff;
border-bottom: env(safe-area-inset-bottom) solid #fff;
gap: 20rpx;
padding-right: 24rpx;
justify-content: flex-end;
pages/ticket/ordersure.vue
+11 -2
View File
@@ -136,7 +136,7 @@
</view>
<view style="width: 654rpx;height: 120rpx;"></view>
<view
style="width: 654rpx;position: fixed;height: 88rpx;line-height: 88rpx;background: #fff;bottom: 0rpx;">
style="width: 654rpx;position: fixed;height: 88rpx;line-height: 88rpx;background: #fff;bottom: 0rpx;left: 0rpx;right: 0rpx;margin: 0 auto;border-bottom: constant(safe-area-inset-bottom) solid #fff;border-bottom: env(safe-area-inset-bottom) solid #fff;">
<u-button shape="circle" size="default"
style="background: linear-gradient(180deg, #FF9E49 0%, #ED3B1A 100%);color: #fff;"
@click="show1=false">确定</u-button>
@@ -559,7 +559,16 @@
background-color: #fff;
height: 62px;
position: fixed;
// bottom: 0rpx;
// xuchao: 改为底部锚定（原来用 JS 算 top，宽屏缩放后会错位），并给全面屏留出底部安全区
top: auto !important;
bottom: 0;
// xuchao: 视口水平居中 —— 宽屏下与居中的页面列对齐
left: 0rpx;
right: 0rpx;
margin-left: auto;
margin-right: auto;
border-bottom: constant(safe-area-inset-bottom) solid #fff;
border-bottom: env(safe-area-inset-bottom) solid #fff;
padding: 14rpx 24rpx;
}
pages/ticket/person.vue
+7 -2
View File
@@ -208,8 +208,13 @@
color: #fff;
font-size: 28rpx;
background: linear-gradient(180deg, #FF9E49 0%, #ED3B1A 100%);
margin-left: 30rpx;
// xuchao: 视口水平居中（宽屏下与页面列对齐）
left: 0rpx;
right: 0rpx;
margin: 0 auto;
position: fixed;
bottom: 25rpx;
// xuchao: 全面屏底部安全区 —— 悬浮按钮整体上移
bottom: calc(25rpx + constant(safe-area-inset-bottom));
bottom: calc(25rpx + env(safe-area-inset-bottom));
}
</style>
pages/ticket/select.vue
+1 -1
View File
@@ -13,7 +13,7 @@
<u-checkbox v-model="item.isSelect" active-color="#457AF7"></u-checkbox>
</view>
</view>
<view style="width: 702rpx;left: 24rpx;position: fixed;bottom: 24rpx;">
<view style="width: 702rpx;position: fixed;left: 0rpx;right: 0rpx;margin: 0 auto;bottom: calc(24rpx + env(safe-area-inset-bottom));">
<u-button shape="circle" size="default" style="background: linear-gradient(180deg, #FF9E49 0%, #ED3B1A 100%);color: #fff;" @click="select">完成</u-button>
</view>
</view>