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))