From 33422b27a9f51979fa5eb356033b89e69d65f5d8 Mon Sep 17 00:00:00 2001
From: bootx <xxm1995@outlook.com>
Date: Mon, 20 Jul 2026 21:04:29 +0800
Subject: [PATCH] =?UTF-8?q?fix(h5):=20=E4=BF=AE=E5=A4=8D=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E9=A1=B5=E9=9D=A2=E6=95=B4=E9=A1=B5=E5=8F=AF=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E4=B8=8E=20iOS=20=E6=A9=A1=E7=9A=AE=E7=AD=8B=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mobile/layout/index.vue                       |  7 +++++--
 src/mobile/views/cashier/CashierEnvPage.vue       |  6 ++----
 src/mobile/views/code-pay/alipay/index.vue        |  1 -
 src/mobile/views/code-pay/douyin/index.vue        |  1 -
 src/mobile/views/code-pay/index.vue               |  1 -
 src/mobile/views/code-pay/shared/CodePayShell.vue |  3 +--
 src/mobile/views/code-pay/union-pay/index.vue     |  1 -
 src/mobile/views/code-pay/wechat/index.vue        |  1 -
 src/mobile/views/home/index.vue                   |  3 ++-
 src/mobile/views/protocol/index.vue               | 10 +++++++++-
 src/shared/styles/common.less                     |  4 ++++
 11 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/mobile/layout/index.vue b/src/mobile/layout/index.vue
index 63dd68b..93c9c5e 100644
--- a/src/mobile/layout/index.vue
+++ b/src/mobile/layout/index.vue
@@ -11,9 +11,9 @@ const keepAliveComponents = computed(() => routeStore.keepAliveComponents)
 
 <template>
   <div
-    class="layout-shell h-screen flex flex-col"
+    class="layout-shell flex flex-col"
   >
-    <RouterView class="flex-1 overflow-x-hidden">
+    <RouterView class="flex-1 overflow-hidden">
       <template #default="{ Component, route }">
         <!-- 空数组 [] 仍为 truthy，须用 length，否则永远走 KeepAlive 分支 -->
         <KeepAlive v-if="keepAliveComponents.length" :include="keepAliveComponents">
@@ -28,5 +28,8 @@ const keepAliveComponents = computed(() => routeStore.keepAliveComponents)
 <style scoped lang="less">
 .layout-shell {
   background: var(--h5-bg-page);
+  // 100dvh 动态视口，地址栏显隐时不再越界；老浏览器回退到 100vh
+  height: 100vh;
+  height: 100dvh;
 }
 </style>
diff --git a/src/mobile/views/cashier/CashierEnvPage.vue b/src/mobile/views/cashier/CashierEnvPage.vue
index 8856a2f..b04d75b 100644
--- a/src/mobile/views/cashier/CashierEnvPage.vue
+++ b/src/mobile/views/cashier/CashierEnvPage.vue
@@ -547,10 +547,8 @@ onUnmounted(() => {
 
 .cashier {
   // 三区布局: header 固定 / 中间滚动 / footer 贴底，矮屏不压按钮
-  height: 100vh;
-  height: 100dvh;
-  max-height: 100vh;
-  max-height: 100dvh;
+  // 父级 RouterView flex-1 已分配全高，用 100% 严格锁定（避免 100vh/dvh 嵌套溢出）
+  height: 100%;
   background: var(--h5-bg-page);
   display: flex;
   flex-direction: column;
diff --git a/src/mobile/views/code-pay/alipay/index.vue b/src/mobile/views/code-pay/alipay/index.vue
index f19f880..033d7c1 100644
--- a/src/mobile/views/code-pay/alipay/index.vue
+++ b/src/mobile/views/code-pay/alipay/index.vue
@@ -105,7 +105,6 @@ onMounted(() => {
 <style scoped lang="less">
 .code-pay-page {
   min-height: 100%;
-  min-height: 100dvh;
   background: var(--h5-bg-page);
   box-sizing: border-box;
 
diff --git a/src/mobile/views/code-pay/douyin/index.vue b/src/mobile/views/code-pay/douyin/index.vue
index 418b0de..1cdb86e 100644
--- a/src/mobile/views/code-pay/douyin/index.vue
+++ b/src/mobile/views/code-pay/douyin/index.vue
@@ -105,7 +105,6 @@ onMounted(() => {
 <style scoped lang="less">
 .code-pay-page {
   min-height: 100%;
-  min-height: 100dvh;
   background: var(--h5-bg-page);
   box-sizing: border-box;
 
diff --git a/src/mobile/views/code-pay/index.vue b/src/mobile/views/code-pay/index.vue
index 1f046de..26ac892 100644
--- a/src/mobile/views/code-pay/index.vue
+++ b/src/mobile/views/code-pay/index.vue
@@ -101,7 +101,6 @@ onMounted(() => {
 <style scoped lang="less">
 .code-pay-dispatch {
   min-height: 100%;
-  min-height: 100dvh;
   padding-bottom: 40px;
   background: var(--h5-bg-page);
   box-sizing: border-box;
diff --git a/src/mobile/views/code-pay/shared/CodePayShell.vue b/src/mobile/views/code-pay/shared/CodePayShell.vue
index 4fc1db4..b65cde3 100644
--- a/src/mobile/views/code-pay/shared/CodePayShell.vue
+++ b/src/mobile/views/code-pay/shared/CodePayShell.vue
@@ -324,7 +324,6 @@ function onPay() {
 
 .code-pay-shell {
   min-height: 100%;
-  min-height: 100dvh;
   background: var(--h5-bg-page);
   display: flex;
   flex-direction: column;
@@ -527,7 +526,7 @@ function onPay() {
   // 成功结果态
   &__result {
     flex: 1;
-    min-height: 100dvh;
+    min-height: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
diff --git a/src/mobile/views/code-pay/union-pay/index.vue b/src/mobile/views/code-pay/union-pay/index.vue
index 1eeaa88..0208590 100644
--- a/src/mobile/views/code-pay/union-pay/index.vue
+++ b/src/mobile/views/code-pay/union-pay/index.vue
@@ -105,7 +105,6 @@ onMounted(() => {
 <style scoped lang="less">
 .code-pay-page {
   min-height: 100%;
-  min-height: 100dvh;
   background: var(--h5-bg-page);
   box-sizing: border-box;
 
diff --git a/src/mobile/views/code-pay/wechat/index.vue b/src/mobile/views/code-pay/wechat/index.vue
index 9d62783..1ce6fac 100644
--- a/src/mobile/views/code-pay/wechat/index.vue
+++ b/src/mobile/views/code-pay/wechat/index.vue
@@ -105,7 +105,6 @@ onMounted(() => {
 <style scoped lang="less">
 .code-pay-page {
   min-height: 100%;
-  min-height: 100dvh;
   background: var(--h5-bg-page);
   box-sizing: border-box;
 
diff --git a/src/mobile/views/home/index.vue b/src/mobile/views/home/index.vue
index e10a9ac..9b6decf 100644
--- a/src/mobile/views/home/index.vue
+++ b/src/mobile/views/home/index.vue
@@ -56,7 +56,8 @@ const titleText = computed(() => {
 
 <style scoped lang="less">
 .home {
-  min-height: 100vh;
+  // 父级 RouterView 的 flex-1 已分配全高，min-height: 100vh 会撑破 flex 容器
+  height: 100%;
   display: flex;
   flex-direction: column;
   background: var(--h5-bg-page);
diff --git a/src/mobile/views/protocol/index.vue b/src/mobile/views/protocol/index.vue
index 4c7c9d2..f36815b 100644
--- a/src/mobile/views/protocol/index.vue
+++ b/src/mobile/views/protocol/index.vue
@@ -90,14 +90,22 @@ onMounted(load)
 
 <style scoped lang="less">
 .protocol-page {
-  min-height: 100vh;
+  // 父级 RouterView flex-1 已分配全高；用 height: 100% 严格锁定，配合 body overflow:hidden 不外溢
+  height: 100%;
   background: var(--h5-bg-card);
   // 留出固定导航栏高度
   padding-top: 46px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
 }
 
 .protocol-body {
+  // 内部滚动容器：正文超长时自滚，不冒泡到 body
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
   padding: 16px;
   // 长文阅读行高优化
   font-size: 15px;
diff --git a/src/shared/styles/common.less b/src/shared/styles/common.less
index 8838d99..e00de99 100644
--- a/src/shared/styles/common.less
+++ b/src/shared/styles/common.less
@@ -2,6 +2,10 @@ body,
 html {
   height: 100%;
   width: 100%;
+  // 阻断 body 滚动（防 iOS Safari 橡皮筋 / 整页空滚）
+  overflow: hidden;
+  // 阻断下拉刷新 / 边界回弹
+  overscroll-behavior: none;
 }
 
 #app,