From d4e41b1423d992333ddf6c7dda328d761a5ade8a Mon Sep 17 00:00:00 2001
From: zhx <zhx@haiyi.com>
Date: Thu, 11 Jun 2026 21:09:09 +0800
Subject: [PATCH] ui

---
 game/rock/index.html  | 17 +++++++++++++----
 game/touzi/index.html | 15 ++++++++++-----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/game/rock/index.html b/game/rock/index.html
index e3351ab..066a739 100644
--- a/game/rock/index.html
+++ b/game/rock/index.html
@@ -37,7 +37,7 @@
             body {
                 display: flex;
                 align-items: flex-start;
-                justify-content: flex-start;
+                justify-content: center;
             }
 
             button {
@@ -54,6 +54,12 @@
                 --game-screen-scale: var(--game-scale);
             }
 
+            .game-stage {
+                width: 100%;
+                max-width: 768px;
+                margin: 0 auto;
+            }
+
             .rps-bg {
                 position: absolute;
                 top: -145px;
@@ -1593,6 +1599,7 @@
             (function () {
                 var DESIGN_WIDTH = 375;
                 var DESIGN_HEIGHT = 812;
+                var MAX_STAGE_WIDTH = 768;
                 var GAME_ID = 'rock';
                 var GAME_CODE = 'game_rock';
                 var root = document.documentElement;
@@ -1657,10 +1664,12 @@
                 }
 
                 function updateScale() {
-                    var scale = Math.min(
-                        window.innerWidth / DESIGN_WIDTH,
-                        window.innerHeight / DESIGN_HEIGHT
+                    // 游戏区域宽度始终吃满可用宽度，但最多放大到 768px；缩放只跟最终宽度走，避免大屏时被高度压窄后露出右侧空条。
+                    var viewportWidth = Math.min(
+                        window.innerWidth,
+                        MAX_STAGE_WIDTH
                     );
+                    var scale = viewportWidth / DESIGN_WIDTH;
                     root.style.setProperty(
                         '--game-scale',
                         String(Math.max(scale, 0.1))
diff --git a/game/touzi/index.html b/game/touzi/index.html
index 80d5aa5..fb8495a 100644
--- a/game/touzi/index.html
+++ b/game/touzi/index.html
@@ -41,7 +41,7 @@
             body {
                 display: flex;
                 align-items: flex-start;
-                justify-content: flex-start;
+                justify-content: center;
             }
 
             button {
@@ -56,8 +56,10 @@
 
             .dice-stage {
                 position: relative;
-                width: calc(var(--dice-frame-width) * var(--dice-scale));
+                width: 100%;
+                max-width: 768px;
                 height: calc(var(--dice-frame-height) * var(--dice-scale));
+                margin: 0 auto;
                 overflow: hidden;
                 background: #030623;
             }
@@ -2503,6 +2505,7 @@
             (function () {
                 var DESIGN_WIDTH = 375;
                 var DESIGN_HEIGHT = 812;
+                var MAX_STAGE_WIDTH = 768;
                 var SETTLEMENT_AUTO_CLOSE_MS = 30000;
                 var DICE_ROLL_EFFECT_URL = 'assets/figma/dice-roll.svga';
                 var root = document.documentElement;
@@ -2552,10 +2555,12 @@
                 }
 
                 function updateScale() {
-                    var scale = Math.min(
-                        window.innerWidth / DESIGN_WIDTH,
-                        window.innerHeight / DESIGN_HEIGHT
+                    // 游戏区域宽度始终吃满可用宽度，但最多放大到 768px；缩放只跟最终宽度走，避免大屏时被高度压窄后露出右侧空条。
+                    var viewportWidth = Math.min(
+                        window.innerWidth,
+                        MAX_STAGE_WIDTH
                     );
+                    var scale = viewportWidth / DESIGN_WIDTH;
                     root.style.setProperty(
                         '--dice-scale',
                         String(Math.max(scale, 0.1))