From 88c7a1f2cf7e27c19db3b31c45225b78019931ba Mon Sep 17 00:00:00 2001
From: Hardy--Lee <>
Date: Wed, 7 May 2025 01:10:12 +0800
Subject: [PATCH] feat: add resolution settings

update adaptive ui

fix backlog max width

uptate config file
---
 packages/webgal/index.html                    | 110 ----------------
 packages/webgal/public/game/config.txt        |   2 +
 .../controller/stage/pixi/PixiController.ts   | 122 +++++++++++++++++-
 .../src/Core/controller/storage/saveGame.ts   |   8 +-
 .../pixi/performs/cherryBlossoms.ts           |   5 +-
 .../Core/gameScripts/pixi/performs/rain.ts    |   5 +-
 .../Core/gameScripts/pixi/performs/snow.ts    |   5 +-
 packages/webgal/src/Core/initializeScript.ts  |  69 +++++-----
 packages/webgal/src/Core/util/constants.scss  |   2 -
 .../util/coreInitialFunction/infoFetcher.ts   |  95 +++++++-------
 packages/webgal/src/Core/webgalCore.ts        |   3 +
 packages/webgal/src/Stage/TextBox/TextBox.tsx |   6 +-
 .../webgal/src/UI/Backlog/backlog.module.scss |  11 +-
 .../BottomControlPanel/BottomControlPanel.tsx |   8 +-
 .../bottomControlPanel.module.scss            |  29 +++--
 packages/webgal/src/UI/Extra/ExtraBgm.tsx     |   3 +-
 packages/webgal/src/UI/Extra/ExtraCg.tsx      |   3 +-
 .../webgal/src/UI/Extra/ExtraCgElement.tsx    |  11 +-
 .../webgal/src/UI/Extra/extra.module.scss     |  50 ++++---
 .../UI/GlobalDialog/globalDialog.module.scss  |   1 -
 packages/webgal/src/UI/Logo/Logo.tsx          |   2 +-
 .../src/UI/Menu/MenuPanel/MenuPanel.tsx       |   5 +-
 .../UI/Menu/MenuPanel/menuPanel.module.scss   |   6 +
 .../UI/Menu/Options/normalButton.module.scss  |   3 +-
 .../UI/Menu/Options/normalOption.module.scss  |   2 +
 .../src/UI/Menu/Options/options.module.scss   |  12 +-
 .../src/UI/Menu/SaveAndLoad/Load/Load.tsx     |   3 +-
 .../src/UI/Menu/SaveAndLoad/Save/Save.tsx     |   3 +-
 .../Menu/SaveAndLoad/SaveAndLoad.module.scss  |  24 ++--
 packages/webgal/src/UI/Menu/menu.module.scss  |   4 +
 packages/webgal/src/UI/Title/Title.tsx        |   1 +
 .../webgal/src/UI/Utils/HorizontalScroll.tsx  |  25 ++++
 packages/webgal/src/UI/Utils/constants.scss   |   2 +
 packages/webgal/src/index.scss                |   4 -
 34 files changed, 368 insertions(+), 276 deletions(-)
 create mode 100644 packages/webgal/src/UI/Utils/HorizontalScroll.tsx
 create mode 100644 packages/webgal/src/UI/Utils/constants.scss

diff --git a/packages/webgal/index.html b/packages/webgal/index.html
index a257f3329..5213a138a 100644
--- a/packages/webgal/index.html
+++ b/packages/webgal/index.html
@@ -13,8 +13,6 @@
   <!--快速显示落地页，让用户感知不到加载的过程-->
   <div id="ebg"></div>
   <div id="Title_enter_page" onclick="enter()" style="
-            width: 2560px;
-            height: 1440px;
             overflow: hidden;
             position: absolute;
             top: 0;
@@ -89,114 +87,6 @@
   </div>
   <div id="panic-overlay"> <!-- 紧急回避 --> </div>
   <div id="root"></div>
-  <script>
-    /**
-     * 在窗口大小改变时进行强制缩放
-     */
-    const ua = navigator.userAgent;
-    const isIOSDevice = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-    function resize() {
-      const targetHeight = 1440;
-      const targetWidth = 2560;
-
-      const h = window.innerHeight; // 窗口高度
-      const w = window.innerWidth; // 窗口宽度
-      const zoomH = h / targetHeight; // 以窗口高度为基准的变换比
-      const zoomW = w / targetWidth; // 以窗口宽度为基准的变换比
-      const zoomH2 = w / targetHeight; // 竖屏时以窗口高度为基础的变换比
-      const zoomW2 = h / targetWidth; // 竖屏时以窗口宽度为基础的变换比
-      let mh = (targetHeight - h) / 2; // y轴移动距离
-      let mw = (targetWidth - w) / 2; // x轴移动距离
-      let mh2os = targetWidth / 2 - w / 2; // 竖屏时 y轴移动距离
-      let mw2os = targetHeight / 2 - h / 2; // 竖屏时 x轴移动距离
-      let transform = '';
-      let ebgTransform = '';
-      const root = document.getElementById('root'); // 获取根元素
-      const title = document.getElementById('Title_enter_page');
-      const ebg = document.getElementById('ebg');
-      const elements = [root, title];
-      if (w > h) {
-        const ebg = document.getElementById('ebg');
-        if (ebg) {
-          ebg.style.height = `100vh`;
-          ebg.style.width = `100vw`;
-          ebgTransform = '';
-        }
-        mw = -mw;
-        mh = -mh;
-        if (w * (9 / 16) >= h) {
-          transform = `translate(${mw}px, ${mh}px) scale(${zoomH},${zoomH})`;
-        }
-        if (w * (9 / 16) < h) {
-          transform = `translate(${mw}px, ${mh}px) scale(${zoomW},${zoomW})`;
-        }
-      } else {
-        /**
-         * 旋转
-         */
-        if (ebg) {
-          ebg.style.height = `${targetHeight}px`;
-          ebg.style.width = `${targetWidth}px`;
-        }
-        mw2os = -mw2os;
-        if (h * (9 / 16) >= w) {
-          ebgTransform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomH2 * 1.75},${zoomH2 * 1.75})`;
-          transform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomH2},${zoomH2})`;
-        }
-        if (h * (9 / 16) < w) {
-          ebgTransform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomW2 * 1.75},${zoomW2 * 1.75})`;
-          transform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomW2},${zoomW2})`;
-        }
-        /**
-         * iOS 不强制旋转
-         */
-        if (isIOSDevice) {
-          const zoomWi = w / targetWidth;
-          transform = `translate(${-mw}px, ${-mh}px) scale(${zoomWi},${zoomWi})`
-        }
-      }
-      if (ebg) {
-        ebg.style.transform = ebgTransform;
-      }
-      for (const element of elements) {
-        if (element) {
-          element.style.transform = transform;
-        }
-      }
-    }
-
-    if (!isIOSDevice) {
-      // 创建一个新的 meta 标签
-      const meta = document.createElement('meta');
-      meta.name = "viewport";
-      meta.content = "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no";
-      // 将该标签添加到 head 中
-      document.getElementsByTagName('head')[0].appendChild(meta);
-      resize();
-      window.onload = resize;
-      window.onresize = resize;
-      // 监听键盘 F11 事件，全屏时触发页面调整
-      document.onkeydown = function (event) {
-        const e = event;
-        if (e && e.key === 'F11') {
-          setTimeout(() => {
-            resize();
-          }, 100);
-        }
-      };
-    } else {
-      // ios
-      const meta = document.createElement('meta');
-      meta.name = "viewport";
-      meta.content = "width=device-width, initial-scale=0.22, minimum-scale=0.01, maximum-scale=1";
-      document.getElementsByTagName('head')[0].appendChild(meta);
-      const style = document.createElement('style');
-      style.type = 'text/css';
-      style.textContent = '* { font-synthesis: none !important; }';
-      document.head.appendChild(style);
-    }
-
-  </script>
   <script>
     /**
      * 注册 Service Worker
diff --git a/packages/webgal/public/game/config.txt b/packages/webgal/public/game/config.txt
index e43b5d633..34f0776ca 100644
--- a/packages/webgal/public/game/config.txt
+++ b/packages/webgal/public/game/config.txt
@@ -4,3 +4,5 @@ Title_img:WebGAL_New_Enter_Image.png;
 Title_bgm:s_Title.mp3;
 Game_Logo:WebGalEnter.png;
 Enable_Appreciation:true;
+Canvas_width:2560;
+Canvas_height:1440;
\ No newline at end of file
diff --git a/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts b/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
index 2a1d2e09a..6e6c57c25 100644
--- a/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
+++ b/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
@@ -8,7 +8,6 @@ import { logger } from '@/Core/util/logger';
 import { isIOS } from '@/Core/initializeScript';
 import { WebGALPixiContainer } from '@/Core/controller/stage/pixi/WebGALPixiContainer';
 import { WebGAL } from '@/Core/WebGAL';
-import { SCREEN_CONSTANTS } from '@/Core/util/constants';
 import { addSpineBgImpl, addSpineFigureImpl } from '@/Core/controller/stage/pixi/spine';
 // import { figureCash } from '@/Core/gameScripts/vocal/conentsCash'; // 如果要使用 Live2D，取消这里的注释
 // import { Live2DModel, SoundManager } from 'pixi-live2d-display-webgal'; // 如果要使用 Live2D，取消这里的注释
@@ -79,8 +78,8 @@ export default class PixiStage {
   public notUpdateBacklogEffects = false;
   public readonly figureContainer: PIXI.Container;
   public figureObjects: Array<IStageObject> = [];
-  public stageWidth = SCREEN_CONSTANTS.width;
-  public stageHeight = SCREEN_CONSTANTS.height;
+  public stageWidth = WebGAL.canvasWidth;
+  public stageHeight = WebGAL.canvasHeight;
   public assetLoader = new PIXI.Loader();
   public readonly backgroundContainer: PIXI.Container;
   public backgroundObjects: Array<IStageObject> = [];
@@ -133,6 +132,7 @@ export default class PixiStage {
     app.renderer.autoResize = true;
     const appRoot = document.getElementById('root');
     if (appRoot) {
+      this.setRootSize(document);
       app.renderer.resize(appRoot.clientWidth, appRoot.clientHeight);
     }
     if (isIOS) {
@@ -167,6 +167,122 @@ export default class PixiStage {
     this.initialize().then(() => {});
   }
 
+  private setRootSize(document: Document) {
+    /**
+     * 在窗口大小改变时进行强制缩放
+     */
+    const ua = navigator.userAgent;
+    const isIOSDevice = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+    function resize() {
+      const targetHeight = WebGAL.canvasHeight;
+      const targetWidth = WebGAL.canvasWidth;
+
+      const h = window.innerHeight; // 窗口高度
+      const w = window.innerWidth; // 窗口宽度
+      const zoomH = h / targetHeight; // 以窗口高度为基准的变换比
+      const zoomW = w / targetWidth; // 以窗口宽度为基准的变换比
+      const zoomH2 = w / targetHeight; // 竖屏时以窗口高度为基础的变换比
+      const zoomW2 = h / targetWidth; // 竖屏时以窗口宽度为基础的变换比
+      let mh = (targetHeight - h) / 2; // y轴移动距离
+      let mw = (targetWidth - w) / 2; // x轴移动距离
+      let mh2os = targetWidth / 2 - w / 2; // 竖屏时 y轴移动距离
+      let mw2os = targetHeight / 2 - h / 2; // 竖屏时 x轴移动距离
+      let transform = '';
+      let ebgTransform = '';
+      const root = document.getElementById('root'); // 获取根元素
+      const title = document.getElementById('Title_enter_page');
+      const ebg = document.getElementById('ebg');
+      const elements = [root, title];
+      if (root) {
+        root.style.width = `${targetWidth}px`;
+        root.style.height = `${targetHeight}px`;
+      }
+      if (title) {
+        title.style.width = `${targetWidth}px`;
+        title.style.height = `${targetHeight}px`;
+      }
+      if (w > h) {
+        const ebg = document.getElementById('ebg');
+        if (ebg) {
+          ebg.style.height = `100vh`;
+          ebg.style.width = `100vw`;
+          ebgTransform = '';
+        }
+        mw = -mw;
+        mh = -mh;
+        if (w * (targetHeight / targetWidth) >= h) {
+          transform = `translate(${mw}px, ${mh}px) scale(${zoomH},${zoomH})`;
+        }
+        if (w * (targetHeight / targetWidth) < h) {
+          transform = `translate(${mw}px, ${mh}px) scale(${zoomW},${zoomW})`;
+        }
+      } else {
+        /**
+         * 旋转
+         */
+        if (ebg) {
+          ebg.style.height = `${targetHeight}px`;
+          ebg.style.width = `${targetWidth}px`;
+        }
+        mw2os = -mw2os;
+        if (h * (targetHeight / targetWidth) >= w) {
+          ebgTransform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomH2 * 1.75},${zoomH2 * 1.75})`;
+          transform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomH2},${zoomH2})`;
+        }
+        if (h * (targetHeight / targetWidth) < w) {
+          ebgTransform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomW2 * 1.75},${zoomW2 * 1.75})`;
+          transform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomW2},${zoomW2})`;
+        }
+        /**
+         * iOS 不强制旋转
+         */
+        if (isIOSDevice) {
+          const zoomWi = w / targetWidth;
+          transform = `translate(${-mw}px, ${-mh}px) scale(${zoomWi},${zoomWi})`
+        }
+      }
+      if (ebg) {
+        ebg.style.transform = ebgTransform;
+      }
+      for (const element of elements) {
+        if (element) {
+          element.style.transform = transform;
+        }
+      }
+    }
+
+    if (!isIOSDevice) {
+      // 创建一个新的 meta 标签
+      const meta = document.createElement('meta');
+      meta.name = "viewport";
+      meta.content = "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no";
+      // 将该标签添加到 head 中
+      document.getElementsByTagName('head')[0].appendChild(meta);
+      resize();
+      window.onload = resize;
+      window.onresize = resize;
+      // 监听键盘 F11 事件，全屏时触发页面调整
+      document.onkeydown = function (event) {
+        const e = event;
+        if (e && e.key === 'F11') {
+          setTimeout(() => {
+            resize();
+          }, 100);
+        }
+      };
+    } else {
+      // ios
+      const meta = document.createElement('meta');
+      meta.name = "viewport";
+      meta.content = "width=device-width, initial-scale=0.22, minimum-scale=0.01, maximum-scale=1";
+      document.getElementsByTagName('head')[0].appendChild(meta);
+      const style = document.createElement('style');
+      style.type = 'text/css';
+      style.textContent = '* { font-synthesis: none !important; }';
+      document.head.appendChild(style);
+    }
+  }
+
   public getFigureObjects() {
     return this.figureObjects;
   }
diff --git a/packages/webgal/src/Core/controller/storage/saveGame.ts b/packages/webgal/src/Core/controller/storage/saveGame.ts
index c729b334c..3398d2d2b 100644
--- a/packages/webgal/src/Core/controller/storage/saveGame.ts
+++ b/packages/webgal/src/Core/controller/storage/saveGame.ts
@@ -36,9 +36,11 @@ export function generateCurrentStageData(index: number, isSavePreviewImage = tru
     const canvas: HTMLCanvasElement = document.getElementById('pixiCanvas')! as HTMLCanvasElement;
     const canvas2 = document.createElement('canvas');
     const context = canvas2.getContext('2d');
-    canvas2.width = 480;
-    canvas2.height = 270;
-    context!.drawImage(canvas, 0, 0, 480, 270);
+    const previewImageWidth = WebGAL.canvasWidth * 0.2;
+    const previewImageHeight = WebGAL.canvasHeight * 0.2;
+    canvas2.width = previewImageWidth;
+    canvas2.height = previewImageHeight;
+    context!.drawImage(canvas, 0, 0, previewImageWidth, previewImageHeight);
     urlToSave = canvas2.toDataURL('image/webp', 0.5);
     canvas2.remove();
   }
diff --git a/packages/webgal/src/Core/gameScripts/pixi/performs/cherryBlossoms.ts b/packages/webgal/src/Core/gameScripts/pixi/performs/cherryBlossoms.ts
index e8f74811a..a4ddb8e4a 100644
--- a/packages/webgal/src/Core/gameScripts/pixi/performs/cherryBlossoms.ts
+++ b/packages/webgal/src/Core/gameScripts/pixi/performs/cherryBlossoms.ts
@@ -2,7 +2,6 @@ import * as PIXI from 'pixi.js';
 import { registerPerform } from '@/Core/util/pixiPerformManager/pixiPerformManager';
 
 import { WebGAL } from '@/Core/WebGAL';
-import { SCREEN_CONSTANTS } from '@/Core/util/constants';
 
 const pixicherryBlossoms = (cherryBlossomsSpeed: number) => {
   // アニメーション パラメータ
@@ -35,8 +34,8 @@ const pixicherryBlossoms = (cherryBlossomsSpeed: number) => {
   function tickerFn(delta: number) {
     // 桜の位置を制御するために使用される長さと幅を取得します
     // 获取长宽，用于控制花出现位置
-    const stageWidth = SCREEN_CONSTANTS.width;
-    const stageHeight = SCREEN_CONSTANTS.height;
+    const stageWidth = WebGAL.canvasWidth;
+    const stageHeight = WebGAL.canvasHeight;
     // オブジェクトを作成
     // 创建对象
     const bunny = new PIXI.Sprite(texture);
diff --git a/packages/webgal/src/Core/gameScripts/pixi/performs/rain.ts b/packages/webgal/src/Core/gameScripts/pixi/performs/rain.ts
index 32f6b0b19..d8260fa22 100644
--- a/packages/webgal/src/Core/gameScripts/pixi/performs/rain.ts
+++ b/packages/webgal/src/Core/gameScripts/pixi/performs/rain.ts
@@ -2,7 +2,6 @@ import * as PIXI from 'pixi.js';
 import { registerPerform } from '@/Core/util/pixiPerformManager/pixiPerformManager';
 
 import { WebGAL } from '@/Core/WebGAL';
-import { SCREEN_CONSTANTS } from '@/Core/util/constants';
 
 const pixiRain = (rainSpeed: number, number: number) => {
   // 动画参数
@@ -29,8 +28,8 @@ const pixiRain = (rainSpeed: number, number: number) => {
   // 监听动画更新
   function ticker(delta: number) {
     // 获取长宽，用于控制雪花出现位置
-    const stageWidth = SCREEN_CONSTANTS.width;
-    const stageHeight = SCREEN_CONSTANTS.height;
+    const stageWidth = WebGAL.canvasWidth;
+    const stageHeight = WebGAL.canvasHeight;
     for (let i = 0; i < number; i++) {
       // 创建对象
       const bunny = new PIXI.Sprite(texture);
diff --git a/packages/webgal/src/Core/gameScripts/pixi/performs/snow.ts b/packages/webgal/src/Core/gameScripts/pixi/performs/snow.ts
index cbeb4f81b..cd550318a 100644
--- a/packages/webgal/src/Core/gameScripts/pixi/performs/snow.ts
+++ b/packages/webgal/src/Core/gameScripts/pixi/performs/snow.ts
@@ -2,7 +2,6 @@ import * as PIXI from 'pixi.js';
 import { registerPerform } from '@/Core/util/pixiPerformManager/pixiPerformManager';
 
 import { WebGAL } from '@/Core/WebGAL';
-import { SCREEN_CONSTANTS } from '@/Core/util/constants';
 
 const pixiSnow = (snowSpeed: number) => {
   // 动画参数
@@ -27,8 +26,8 @@ const pixiSnow = (snowSpeed: number) => {
   const bunnyList: any = [];
   let addBunnyCounter = 0;
   // 获取长宽，用于控制雪花出现位置
-  const stageWidth = SCREEN_CONSTANTS.width;
-  const stageHeight = SCREEN_CONSTANTS.height;
+  const stageWidth = WebGAL.canvasWidth;
+  const stageHeight = WebGAL.canvasHeight;
   // 监听动画更新
   function tickerFn(delta: number) {
     addBunnyCounter++;
diff --git a/packages/webgal/src/Core/initializeScript.ts b/packages/webgal/src/Core/initializeScript.ts
index ebab753e2..f910d433c 100644
--- a/packages/webgal/src/Core/initializeScript.ts
+++ b/packages/webgal/src/Core/initializeScript.ts
@@ -43,42 +43,43 @@ export const initializeScript = (): void => {
   loadStyle('./game/userStyleSheet.css');
   // 获得 user Animation
   getUserAnimation();
-  // 获取游戏信息
-  infoFetcher('./game/config.txt');
-  // 获取start场景
-  const sceneUrl: string = assetSetter('start.txt', fileType.scene);
-  // 场景写入到运行时
-  sceneFetcher(sceneUrl).then((rawScene) => {
-    WebGAL.sceneManager.sceneData.currentScene = sceneParser(rawScene, 'start.txt', sceneUrl);
-    // 开始场景的预加载
-    const subSceneList = WebGAL.sceneManager.sceneData.currentScene.subSceneList;
-    WebGAL.sceneManager.settledScenes.push(sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
-    const subSceneListUniq = uniqWith(subSceneList); // 去重
-    scenePrefetcher(subSceneListUniq);
-  });
-  /**
-   * 启动Pixi
-   */
-  WebGAL.gameplay.pixiStage = new PixiStage();
+  // 获取游戏信息，并强行等待读取完配置数据
+  infoFetcher('./game/config.txt').then(()=>{
+    // 获取start场景
+    const sceneUrl: string = assetSetter('start.txt', fileType.scene);
+    // 场景写入到运行时
+    sceneFetcher(sceneUrl).then((rawScene) => {
+      WebGAL.sceneManager.sceneData.currentScene = sceneParser(rawScene, 'start.txt', sceneUrl);
+      // 开始场景的预加载
+      const subSceneList = WebGAL.sceneManager.sceneData.currentScene.subSceneList;
+      WebGAL.sceneManager.settledScenes.push(sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
+      const subSceneListUniq = uniqWith(subSceneList); // 去重
+      scenePrefetcher(subSceneListUniq);
+    });
+    /**
+     * 启动Pixi
+     */
+    WebGAL.gameplay.pixiStage = new PixiStage();
 
-  /**
-   * iOS 设备 卸载所有 Service Worker
-   */
-  // if ('serviceWorker' in navigator && isIOS) {
-  //   navigator.serviceWorker.getRegistrations().then((registrations) => {
-  //     for (const registration of registrations) {
-  //       registration.unregister().then(() => {
-  //         logger.info('已卸载 Service Worker');
-  //       });
-  //     }
-  //   });
-  // }
+    /**
+     * iOS 设备 卸载所有 Service Worker
+     */
+    // if ('serviceWorker' in navigator && isIOS) {
+    //   navigator.serviceWorker.getRegistrations().then((registrations) => {
+    //     for (const registration of registrations) {
+    //       registration.unregister().then(() => {
+    //         logger.info('已卸载 Service Worker');
+    //       });
+    //     }
+    //   });
+    // }
 
-  /**
-   * 绑定工具函数
-   */
-  bindExtraFunc();
-  webSocketFunc();
+    /**
+     * 绑定工具函数
+     */
+    bindExtraFunc();
+    webSocketFunc();
+  })
 };
 
 function loadStyle(url: string) {
diff --git a/packages/webgal/src/Core/util/constants.scss b/packages/webgal/src/Core/util/constants.scss
index 1020b9e78..e69de29bb 100644
--- a/packages/webgal/src/Core/util/constants.scss
+++ b/packages/webgal/src/Core/util/constants.scss
@@ -1,2 +0,0 @@
-$screenWidth: 2560px;
-$screenHeight: 1440px;
diff --git a/packages/webgal/src/Core/util/coreInitialFunction/infoFetcher.ts b/packages/webgal/src/Core/util/coreInitialFunction/infoFetcher.ts
index 61d4001f9..0670b4733 100644
--- a/packages/webgal/src/Core/util/coreInitialFunction/infoFetcher.ts
+++ b/packages/webgal/src/Core/util/coreInitialFunction/infoFetcher.ts
@@ -18,54 +18,61 @@ declare global {
  * 获取游戏信息
  * @param url 游戏信息路径
  */
-export const infoFetcher = (url: string) => {
+export const infoFetcher = async (url: string) => {
   const dispatch = webgalStore.dispatch;
-  axios.get(url).then(async (r) => {
-    let gameConfigRaw: string = r.data;
-    let gameConfig = WebgalParser.parseConfig(gameConfigRaw);
-    logger.info('获取到游戏信息', gameConfig);
-    // 先把 key 找到并设置了
-    const keyItem = gameConfig.find((e) => e.command === 'Game_key');
-    WebGAL.gameKey = (keyItem?.args?.[0] as string) ?? '';
-    initKey();
-    await getStorageAsync();
-    getFastSaveFromStorage();
-    getSavesFromStorage(0, 0);
-    // 按照游戏的配置开始设置对应的状态
-    gameConfig.forEach((e) => {
-      const { command, args } = e;
-      if (args.length > 0) {
-        if (args.length > 1) {
-          dispatch(
-            setGlobalVar({
-              key: command,
-              value: args.join('|'),
-            }),
-          );
-        } else {
-          let res: any = args[0].trim();
-          if (/^(true|false)$/g.test(args[0])) {
-            res = res === 'true';
-          } else if (/^[0-9]+\.?[0-9]+$/g.test(args[0])) {
-            res = Number(res);
-          }
+  const r = await axios.get(url)
+  let gameConfigRaw: string = r.data;
+  let gameConfig = WebgalParser.parseConfig(gameConfigRaw);
+  logger.info('获取到游戏信息', gameConfig);
+  // 先把 key 找到并设置了
+  const keyItem = gameConfig.find((e) => e.command === 'Game_key');
+  WebGAL.gameKey = (keyItem?.args?.[0] as string) ?? '';
+  initKey();
+  await getStorageAsync();
+  getFastSaveFromStorage();
+  getSavesFromStorage(0, 0);
+  // 按照游戏的配置开始设置对应的状态
+  gameConfig.forEach((e) => {
+    const { command, args } = e;
+    if (args.length > 0) {
+      if (args.length > 1) {
+        dispatch(
+          setGlobalVar({
+            key: command,
+            value: args.join('|'),
+          }),
+        );
+      } else {
+        let res: any = args[0].trim();
+        if (/^(true|false)$/g.test(args[0])) {
+          res = res === 'true';
+        } else if (/^[0-9]+\.?[0-9]+$/g.test(args[0])) {
+          res = Number(res);
+        }
 
-          dispatch(
-            setGlobalVar({
-              key: command,
-              value: res,
-            }),
-          );
+        dispatch(
+          setGlobalVar({
+            key: command,
+            value: res,
+          }),
+        );
 
-          if (command === 'Enable_Appreciation') {
-            dispatch(setEnableAppreciationMode(res));
-          }
+        if (command === 'Enable_Appreciation') {
+          dispatch(setEnableAppreciationMode(res));
+        }
+
+        if (command === 'Canvas_width') {
+          WebGAL.canvasWidth = Number(res);
         }
-      }
-    });
 
-    window?.renderPromise?.();
-    delete window.renderPromise;
-    setStorage();
+        if (command === 'Canvas_height') {
+          WebGAL.canvasHeight = Number(res);
+        }
+      }
+    }
   });
+
+  window?.renderPromise?.();
+  delete window.renderPromise;
+  setStorage();
 };
diff --git a/packages/webgal/src/Core/webgalCore.ts b/packages/webgal/src/Core/webgalCore.ts
index f1becd487..550826713 100644
--- a/packages/webgal/src/Core/webgalCore.ts
+++ b/packages/webgal/src/Core/webgalCore.ts
@@ -4,6 +4,7 @@ import { SceneManager } from '@/Core/Modules/scene';
 import { AnimationManager } from '@/Core/Modules/animations';
 import { Gameplay } from './Modules/gamePlay';
 import { Events } from '@/Core/Modules/events';
+import { SCREEN_CONSTANTS } from '@/Core/util/constants';
 
 export class WebgalCore {
   public sceneManager = new SceneManager();
@@ -13,4 +14,6 @@ export class WebgalCore {
   public gameName = '';
   public gameKey = '';
   public events = new Events();
+  public canvasWidth = SCREEN_CONSTANTS.width;
+  public canvasHeight = SCREEN_CONSTANTS.height;
 }
diff --git a/packages/webgal/src/Stage/TextBox/TextBox.tsx b/packages/webgal/src/Stage/TextBox/TextBox.tsx
index d09903eec..e831bb23c 100644
--- a/packages/webgal/src/Stage/TextBox/TextBox.tsx
+++ b/packages/webgal/src/Stage/TextBox/TextBox.tsx
@@ -7,8 +7,8 @@ import { getTextSize } from '@/UI/getTextSize';
 import { match } from '@/Core/util/match';
 import { textSize } from '@/store/userDataInterface';
 import IMSSTextbox from '@/Stage/TextBox/IMSSTextbox';
-import { SCREEN_CONSTANTS } from '@/Core/util/constants';
 import useEscape from '@/hooks/useEscape';
+import { WebGAL } from '@/Core/WebGAL';
 
 const userAgent = navigator.userAgent;
 const isFirefox = /firefox/i.test(userAgent);
@@ -58,8 +58,8 @@ export const TextBox = () => {
     }
 
     const handleResize = () => {
-      const targetHeight = SCREEN_CONSTANTS.height;
-      const targetWidth = SCREEN_CONSTANTS.width;
+      const targetHeight = WebGAL.canvasHeight;
+      const targetWidth = WebGAL.canvasWidth;
 
       const h = window.innerHeight; // 窗口高度
       const w = window.innerWidth; // 窗口宽度
diff --git a/packages/webgal/src/UI/Backlog/backlog.module.scss b/packages/webgal/src/UI/Backlog/backlog.module.scss
index 7d3f9a6dd..3676db8a4 100644
--- a/packages/webgal/src/UI/Backlog/backlog.module.scss
+++ b/packages/webgal/src/UI/Backlog/backlog.module.scss
@@ -1,3 +1,5 @@
+@import "../Utils/constants.scss";
+
 .Backlog_main {
   font-family: "思源宋体", serif;
   position: absolute;
@@ -9,6 +11,7 @@
   padding: 2em 0 2em 0;
   animation: backlog_soft_in 0.7s ease-out forwards;
   box-sizing: border-box;
+  justify-items: center;
 }
 
 .Backlog_main_out {
@@ -22,6 +25,7 @@
   padding: 2em 0 2em 0;
   animation: backlog_soft_out 0.7s ease-out forwards;
   box-sizing: border-box;
+  justify-items: center;
 }
 
 // 把z-index置为负数 不然会挡住点击层
@@ -39,6 +43,8 @@
   padding: 0 0 0 1em;
   display: flex;
   height: 10%;
+  width: 100%;
+  max-width: $defaultScreenWidth;
 }
 
 .backlog_top_icon {
@@ -74,9 +80,10 @@
 }
 
 .backlog_content {
-  position: absolute;
+  position: relative;
+  max-width: $defaultScreenWidth;
   height: 80%;
-  padding: 1em 10em 1em 10em;
+  padding: 1em 5em 1em 5em;
   overflow: auto;
   display: flex;
   flex-flow: column-reverse;
diff --git a/packages/webgal/src/UI/BottomControlPanel/BottomControlPanel.tsx b/packages/webgal/src/UI/BottomControlPanel/BottomControlPanel.tsx
index 1a6d9eab6..4882e98a7 100644
--- a/packages/webgal/src/UI/BottomControlPanel/BottomControlPanel.tsx
+++ b/packages/webgal/src/UI/BottomControlPanel/BottomControlPanel.tsx
@@ -31,6 +31,7 @@ import { showGlogalDialog, switchControls } from '@/UI/GlobalDialog/GlobalDialog
 import { useEffect } from 'react';
 import { getSavesFromStorage } from '@/Core/controller/storage/savesController';
 import { easyCompile } from '@/UI/Menu/SaveAndLoad/Save/Save';
+import { HorizontalScroll } from '@/UI/Utils/HorizontalScroll';
 
 export const BottomControlPanel = () => {
   const t = useTrans('gaming.');
@@ -66,7 +67,7 @@ export const BottomControlPanel = () => {
     fastSlPreview = (
       <div className={styles.slPreviewMain}>
         <div className={styles.imgContainer}>
-          <img style={{ height: '100%' }} alt="q-save-preview image" src={data.previewImage} />
+          <img className={styles.previewImg} alt="q-save-preview image" src={data.previewImage} />
         </div>
         <div className={styles.textContainer}>
           <div>{easyCompile(data.nowStageState.showName)}</div>
@@ -80,7 +81,8 @@ export const BottomControlPanel = () => {
     // <div className={styles.ToCenter}>
     <>
       {GUIStore.showTextBox && stageState.enableFilm === '' && (
-        <div className={styles.main} style={{ visibility: GUIStore.controlsVisibility ? 'visible' : 'hidden' }}>
+        <HorizontalScroll className={styles.main} style={{ visibility: GUIStore.controlsVisibility ? 'visible' : 'hidden' }}>
+          <div style={{flexGrow: 1}}/>
           {GUIStore.showTextBox && (
             <span
               className={styles.singleButton}
@@ -313,7 +315,7 @@ export const BottomControlPanel = () => {
               <Unlock className={styles.button} theme="outline" size={size} fill="#f5f5f7" strokeWidth={strokeWidth} />
             )}
           </span>
-        </div>
+        </HorizontalScroll>
       )}
     </>
     // </div>
diff --git a/packages/webgal/src/UI/BottomControlPanel/bottomControlPanel.module.scss b/packages/webgal/src/UI/BottomControlPanel/bottomControlPanel.module.scss
index e790bc398..cb4730c34 100644
--- a/packages/webgal/src/UI/BottomControlPanel/bottomControlPanel.module.scss
+++ b/packages/webgal/src/UI/BottomControlPanel/bottomControlPanel.module.scss
@@ -16,18 +16,17 @@
   z-index: 9;
   display: flex;
   //background-image: linear-gradient(rgba(245, 247, 250, 0.7) 0%, rgba(195, 207, 226, 0.7) 100%);
-  flex-flow: row;
-  justify-content: center;
-  align-items: center;
   //width: 100%;
-  height: 70px;
+  left: 20px;
   right: 20px;
-  border-radius: 35px;
   //backdrop-filter: blur(5px);
   padding: 0.15em 1.75em 0.15em 1.75em;
   //background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
   //border-radius: 10px;
   font-size: 80%;
+  align-items: end;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
 .button {
@@ -49,11 +48,12 @@
   height: 100%;
   display: inline-block;
   font-size: 150%;
-  padding: 0.25em 0.3em 0 0.15em;
+  padding: 0.2em 0.3em 0.0em 0.3em;
   transition: background-color 0.5s;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 4px;
   margin: 0 0.1em 0 0.1em;
+  flex-shrink: 0;
 }
 
 .singleButton {
@@ -62,16 +62,19 @@
   display: inline-block;
   color: white;
   font-size: 150%;
-  padding: 0.3em 0.3em 0 0.15em;
+  padding: 0.2em 0.3em 0.0em 0.3em;
   transition: background-color 0.5s;
   cursor: pointer;
   border-radius: 4px;
   margin: 0 0.1em 0 0.1em;
   position: relative;
+  flex-shrink: 0;
 }
 
 .singleButton:hover {
   background-color: rgba(255, 255, 255, 0.3);
+  // 此处是为了让快速读存档弹窗不被裁剪
+  margin-top: 300px;
 }
 
 .fastSlPreview {
@@ -115,11 +118,21 @@
 
 .imgContainer {
   display: flex;
-  overflow: hidden;
+  // overflow: hidden;
   border-radius: 5px;
   //outline: 4px solid #005caf;
   flex-shrink: 0;
   height: 100%;
+  aspect-ratio: 16/9;
+}
+
+.previewImg {
+  width: 100%;
+  height: 100%;
+  // aspect-ratio: 4/3;
+  // height: 100%;
+  object-fit: cover;
+  // height: 200%;
 }
 
 .textContainer {
diff --git a/packages/webgal/src/UI/Extra/ExtraBgm.tsx b/packages/webgal/src/UI/Extra/ExtraBgm.tsx
index 49d189d73..520e67e19 100644
--- a/packages/webgal/src/UI/Extra/ExtraBgm.tsx
+++ b/packages/webgal/src/UI/Extra/ExtraBgm.tsx
@@ -19,7 +19,6 @@ export function ExtraBgm() {
   let foundCurrentBgmName = initName;
   let foundCurrentBgmIndex = -1;
   const iconSize = 39;
-  const bgmPlayerHeight = isShowBgmList.value ? '80%' : '10%';
   const bgmListLen = extraState.bgm.length;
   extraState.bgm.forEach((e, i) => {
     if (e.url === currentBgmSrc) {
@@ -63,7 +62,7 @@ export function ExtraBgm() {
     );
   });
   return (
-    <div className={styles.bgmContainer} style={{ maxHeight: bgmPlayerHeight }}>
+    <div className={styles.bgmContainer}>
       <div className={styles.bgmPlayerMain}>
         <div
           onClick={() => {
diff --git a/packages/webgal/src/UI/Extra/ExtraCg.tsx b/packages/webgal/src/UI/Extra/ExtraCg.tsx
index 8f610ebc7..f123cfb01 100644
--- a/packages/webgal/src/UI/Extra/ExtraCg.tsx
+++ b/packages/webgal/src/UI/Extra/ExtraCg.tsx
@@ -6,6 +6,7 @@ import { useValue } from '@/hooks/useValue';
 import './extraCG_animation_List.scss';
 import { ExtraCgElement } from '@/UI/Extra/ExtraCgElement';
 import useSoundEffect from '@/hooks/useSoundEffect';
+import HorizontalScroll from '@/UI//Utils/HorizontalScroll';
 
 export function ExtraCg() {
   const cgPerPage = 8;
@@ -63,7 +64,7 @@ export function ExtraCg() {
   return (
     <div className={styles.cgMain}>
       <div className={styles.cgShowDiv}>
-        <div className={styles.cgShowDivWarpper}>{showNav}</div>
+        <HorizontalScroll className={styles.cgShowDivWarpper}>{showNav}</HorizontalScroll>
       </div>
       <div className={styles.cgContainer}>{showCgList}</div>
     </div>
diff --git a/packages/webgal/src/UI/Extra/ExtraCgElement.tsx b/packages/webgal/src/UI/Extra/ExtraCgElement.tsx
index f8d90835b..b64b54364 100644
--- a/packages/webgal/src/UI/Extra/ExtraCgElement.tsx
+++ b/packages/webgal/src/UI/Extra/ExtraCgElement.tsx
@@ -45,14 +45,9 @@ export function ExtraCgElement(props: IProps) {
       );
     } else if (isImage) {
       return (
-        <div
-          style={{
-            backgroundImage: `url('${props.resourceUrl}')`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            width: '100%',
-            height: '100%',
-          }}
+        <img
+          className={styles.cgImage}
+          src = {props.resourceUrl}
         />
       );
     } else {
diff --git a/packages/webgal/src/UI/Extra/extra.module.scss b/packages/webgal/src/UI/Extra/extra.module.scss
index 1004f06ab..0563cbfc2 100644
--- a/packages/webgal/src/UI/Extra/extra.module.scss
+++ b/packages/webgal/src/UI/Extra/extra.module.scss
@@ -1,3 +1,5 @@
+@import "../Utils/constants.scss";
+
 .extra {
   width: 100%;
   height: 100%;
@@ -8,12 +10,14 @@
   background-image: linear-gradient(135deg, #93a5cf 0%, #e4efe9 100%);;
   padding: 2em 2em 2em 2em;
   box-sizing: border-box;
+  justify-items: center;
 }
 
 .extra_top {
   padding: 0 0 0 0;
   display: flex;
-  height: 10%;
+  width: 100%;
+  max-width: $defaultScreenWidth;
 }
 
 .extra_top_icon {
@@ -51,10 +55,11 @@
 
 .mainContainer {
   box-sizing: border-box;
-  padding: 0 2em 0 2em;
   display: flex;
-  height: 92%;
+  width: 100%;
   flex-flow: column;
+  max-width: $defaultScreenWidth;
+  align-items: center;
 }
 
 .bgmContainer {
@@ -63,8 +68,11 @@
   bottom: 30px;
   position: absolute;
   overflow: auto;
-  //width: 100%;
+  width: 93%;
   //height: 70%;
+  max-width: $defaultScreenWidth;
+  max-height: 70%;
+  justify-self: center;
   box-sizing: border-box;
   display: flex;
   flex-flow: column-reverse;
@@ -89,7 +97,7 @@
   align-items: flex-start;
   margin: 0 0 15px 0;
   flex-wrap: wrap;
-  overflow: auto;
+  overflow-y: auto;
 }
 
 .bgmPlayerMain {
@@ -166,31 +174,39 @@
   width: 100%;
   display: flex;
   flex-wrap: wrap;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: flex-start;
   align-content: flex-start;
-  height: 90%;
+  // height: 90%;
   box-sizing: border-box;
-  padding: 4em 0 0 2em;
+  padding: 4em 2em 4em 2em;
+  height: 1000px;
+  overflow-y: auto;
 }
 
 .cgElement {
-  width: 22.5%;
-  height: 37.5%;
+  height: 300px;
+  width: auto;
   background-color: rgba(255, 255, 255, 0.75);
   box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.35);
   box-sizing: border-box;
   padding: 0.75em 0.75em 0.75em 0.75em;
   opacity: 0;
-  margin: 1em 1em 1em 1em;
+  margin: 1.5em 1em 1.5em 1em;
   animation-delay: 100ms;
   z-index: 1;
-  position: relative;
+  position: initial;
   cursor: pointer;
 }
 
+.cgImage {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 .cgShowDiv {
-  height: 8%;
+  // height: 8%;
   width: 100%;
   display: flex;
   flex-flow: row;
@@ -201,11 +217,13 @@
 .cgShowDivWarpper {
   display: flex;
   flex-flow: row;
-  justify-content: center;
+  // justify-content: center;
   align-items: flex-end;
   //background: rgba(255, 255, 255, 0.35);
   border-radius: 7px;
   padding: 12px 15px;
+  overflow-x: auto;
+  // scrollbar-width: none;
 }
 
 .cgNav {
@@ -247,7 +265,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -255,8 +273,6 @@
 
 .showFullCgMain {
   cursor: pointer;
-  width: 80%;
-  height: 80%;
   box-sizing: border-box;
   padding: 2em 2em 2em 2em;
   background: rgba(255, 255, 255, 0.95);
diff --git a/packages/webgal/src/UI/GlobalDialog/globalDialog.module.scss b/packages/webgal/src/UI/GlobalDialog/globalDialog.module.scss
index 206d4c785..277ded016 100644
--- a/packages/webgal/src/UI/GlobalDialog/globalDialog.module.scss
+++ b/packages/webgal/src/UI/GlobalDialog/globalDialog.module.scss
@@ -32,7 +32,6 @@
 }
 
 .glabalDialog_container {
-  height: 20%;
   width: 100%;
   border-top: 4px solid;
   border-bottom: 4px solid;
diff --git a/packages/webgal/src/UI/Logo/Logo.tsx b/packages/webgal/src/UI/Logo/Logo.tsx
index a1b3eb6b8..987254162 100644
--- a/packages/webgal/src/UI/Logo/Logo.tsx
+++ b/packages/webgal/src/UI/Logo/Logo.tsx
@@ -55,7 +55,7 @@ const Logo: FC = () => {
           className={styles.Logo_main}
           key={currentLogoIndex.value + 'bg'}
           onClick={nextImg}
-          style={{ backgroundImage: `url("${currentLogoUrl}")`, animationDuration: `${animationDuration}ms` }}
+          style={{ backgroundImage: `url("${currentLogoUrl}")`, backgroundPosition: 'center', animationDuration: `${animationDuration}ms` }}
         />
       )}
     </>
diff --git a/packages/webgal/src/UI/Menu/MenuPanel/MenuPanel.tsx b/packages/webgal/src/UI/Menu/MenuPanel/MenuPanel.tsx
index 85e1100d6..a78c97cae 100644
--- a/packages/webgal/src/UI/Menu/MenuPanel/MenuPanel.tsx
+++ b/packages/webgal/src/UI/Menu/MenuPanel/MenuPanel.tsx
@@ -9,6 +9,7 @@ import { backToTitle } from '@/Core/controller/gamePlay/backToTitle';
 import useTrans from '@/hooks/useTrans';
 import useSoundEffect from '@/hooks/useSoundEffect';
 import { showGlogalDialog } from '@/UI/GlobalDialog/GlobalDialog';
+import HorizontalScroll from '@/UI/Utils/HorizontalScroll';
 
 /**
  * Menu页的底栏
@@ -40,7 +41,7 @@ export const MenuPanel = () => {
     GUIState.currentMenuTag === MenuPanelTag.Option ? `rgba(81, 110, 65, 0.9)` : `rgba(123,144,169,1)`;
 
   return (
-    <div className={styles.MenuPanel_main}>
+    <HorizontalScroll className={styles.MenuPanel_main}>
       <MenuPanelButton
         iconName="save"
         buttonOnClassName={SaveTagOn}
@@ -111,6 +112,6 @@ export const MenuPanel = () => {
         tagName={t('exit.title')}
         key="exitIcon"
       />
-    </div>
+    </HorizontalScroll>
   );
 };
diff --git a/packages/webgal/src/UI/Menu/MenuPanel/menuPanel.module.scss b/packages/webgal/src/UI/Menu/MenuPanel/menuPanel.module.scss
index fc879cbc0..d83b2ff56 100644
--- a/packages/webgal/src/UI/Menu/MenuPanel/menuPanel.module.scss
+++ b/packages/webgal/src/UI/Menu/MenuPanel/menuPanel.module.scss
@@ -1,12 +1,17 @@
+@import "../../Utils/constants.scss";
+
 .MenuPanel_main {
   width: 100%;
   height: 10%;
+  max-width: $defaultScreenWidth;
   display: flex;
   justify-content: center;
   align-items: center;
   //background-color: rgba(255, 255, 255, 1);
   //box-shadow: 0 0 45px 15px rgba(0, 0, 0, 0.05);
   padding: 0 55px;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
 .MenuPanel_button {
@@ -24,6 +29,7 @@
   color: rgba(123,144,169, 1);
   background: rgba(0, 0, 0, 0);
   overflow: hidden;
+  flex-shrink: 0;
   //border-right: 1.5px solid rgba(0, 0, 0, 0.15);
   transition: text-shadow 0.7s, background-color 0.7s;
 }
diff --git a/packages/webgal/src/UI/Menu/Options/normalButton.module.scss b/packages/webgal/src/UI/Menu/Options/normalButton.module.scss
index 2f48b267e..a99576229 100644
--- a/packages/webgal/src/UI/Menu/Options/normalButton.module.scss
+++ b/packages/webgal/src/UI/Menu/Options/normalButton.module.scss
@@ -3,10 +3,11 @@
   box-sizing: border-box;
   padding: 0.2em 1em 0.2em 1em;
   background-color: rgba(50, 50, 50, 0.05);
-  margin: 0 0.4em 0 0;
+  margin: 0.2em;
   color: rgba(160, 170, 160, 1);
   cursor: pointer;
   border-bottom: 2px solid transparent;
+  flex-shrink: 0;
 }
 
 .NormalButton:hover {
diff --git a/packages/webgal/src/UI/Menu/Options/normalOption.module.scss b/packages/webgal/src/UI/Menu/Options/normalOption.module.scss
index 8f368f6fc..ac70d45d7 100644
--- a/packages/webgal/src/UI/Menu/Options/normalOption.module.scss
+++ b/packages/webgal/src/UI/Menu/Options/normalOption.module.scss
@@ -48,7 +48,9 @@
 
 .NormalOption_buttonList {
   padding: 0.5em 0 0.5em 0;
+  flex: 1;
   display: flex;
+  flex-flow: wrap;
 }
 
 @keyframes Elements_in {
diff --git a/packages/webgal/src/UI/Menu/Options/options.module.scss b/packages/webgal/src/UI/Menu/Options/options.module.scss
index bc3a7622e..e8b5974f6 100644
--- a/packages/webgal/src/UI/Menu/Options/options.module.scss
+++ b/packages/webgal/src/UI/Menu/Options/options.module.scss
@@ -1,13 +1,12 @@
 .Options_main {
-  position: absolute;
+  position: relative;
   cursor: default;
-  height: 90%;
+  height: 100%;
   width: 100%;
   //background: rgba(255, 255, 255, 0.65);
 }
 
 .Options_top {
-  height: 15%;
   width: 100%;
   display: flex;
   align-items: flex-start;
@@ -17,7 +16,6 @@
   font-family: "思源宋体", serif;
   letter-spacing: 0.1em;
   font-size: 225%;
-  margin: 0.5em 0 0.5em 0;
   padding: 0.2em 2em 0.2em 1.1em;
   box-sizing: border-box;
   //background-color: rgba(255, 255, 255, 0.99);
@@ -57,10 +55,10 @@
 }
 
 .Options_main_content {
-  display: flex;
+  display: block;
   flex: 1;
   padding: 0 0 0 3em;
-  overflow: auto;
+  overflow-y: auto;
 }
 
 .Options_main_content_half {
@@ -106,7 +104,7 @@
 .Options_page_container {
   height: 85%;
   display: flex;
-  padding: 1em 3.75em 1em 3.75em;
+  padding: 1em 1em 1em 3.75em;
 }
 
 .Options_button_list {
diff --git a/packages/webgal/src/UI/Menu/SaveAndLoad/Load/Load.tsx b/packages/webgal/src/UI/Menu/SaveAndLoad/Load/Load.tsx
index 96fc6efcd..5e03e9884 100644
--- a/packages/webgal/src/UI/Menu/SaveAndLoad/Load/Load.tsx
+++ b/packages/webgal/src/UI/Menu/SaveAndLoad/Load/Load.tsx
@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next';
 import useSoundEffect from '@/hooks/useSoundEffect';
 import { getSavesFromStorage } from '@/Core/controller/storage/savesController';
 import { easyCompile } from '@/UI/Menu/SaveAndLoad/Save/Save';
+import HorizontalScroll from '@/UI/Utils/HorizontalScroll';
 
 export const Load: FC = () => {
   const { playSeClick, playSeEnter, playSePageChange } = useSoundEffect();
@@ -105,7 +106,7 @@ export const Load: FC = () => {
         <div className={styles.Save_Load_title}>
           <div className={styles.Load_title_text}>{t('loadSaving.title')}</div>
         </div>
-        <div className={styles.Save_Load_top_buttonList}>{page}</div>
+        <HorizontalScroll className={styles.Save_Load_top_buttonList}>{page}</HorizontalScroll>
       </div>
       <div className={styles.Save_Load_content} id={'Load_content_page_' + userDataState.optionData.slPage}>
         {showSaves}
diff --git a/packages/webgal/src/UI/Menu/SaveAndLoad/Save/Save.tsx b/packages/webgal/src/UI/Menu/SaveAndLoad/Save/Save.tsx
index d084a7c05..076358154 100644
--- a/packages/webgal/src/UI/Menu/SaveAndLoad/Save/Save.tsx
+++ b/packages/webgal/src/UI/Menu/SaveAndLoad/Save/Save.tsx
@@ -11,6 +11,7 @@ import useSoundEffect from '@/hooks/useSoundEffect';
 import { getSavesFromStorage } from '@/Core/controller/storage/savesController';
 import { compileSentence } from '@/Stage/TextBox/TextBox';
 import { mergeStringsAndKeepObjects } from '@/UI/Backlog/Backlog';
+import HorizontalScroll from '@/UI/Utils/HorizontalScroll';
 
 export const Save: FC = () => {
   const { playSePageChange, playSeEnter, playSeDialogOpen } = useSoundEffect();
@@ -117,7 +118,7 @@ export const Save: FC = () => {
         <div className={styles.Save_Load_title}>
           <div className={styles.Save_title_text}>{t('saving.title')}</div>
         </div>
-        <div className={styles.Save_Load_top_buttonList}>{page}</div>
+        <HorizontalScroll className={styles.Save_Load_top_buttonList}>{page}</HorizontalScroll>
       </div>
       <div className={styles.Save_Load_content} id={'Save_content_page_' + userDataState.optionData.slPage}>
         {showSaves}
diff --git a/packages/webgal/src/UI/Menu/SaveAndLoad/SaveAndLoad.module.scss b/packages/webgal/src/UI/Menu/SaveAndLoad/SaveAndLoad.module.scss
index a0f623ed2..fed82ce93 100644
--- a/packages/webgal/src/UI/Menu/SaveAndLoad/SaveAndLoad.module.scss
+++ b/packages/webgal/src/UI/Menu/SaveAndLoad/SaveAndLoad.module.scss
@@ -1,7 +1,7 @@
 .Save_Load_main {
-  height: 90%;
+  height: 100%;
   width: 100%;
-  position: absolute;
+  position: relative;
   cursor: default;
 }
 
@@ -57,13 +57,15 @@
 .Save_Load_top_buttonList {
   height: 100%;
   display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
   //padding: 0 0 0 2em;
 }
 
 .Save_Load_top_button {
+  min-width: 100px;
   cursor: pointer;
   font-size: 200%;
-  width: 2.05em;
   text-align: center;
   color: rgba(0, 0, 0, 0.5);
   box-sizing: border-box;
@@ -99,7 +101,7 @@
 
 .Load_top_button_on {
   font-weight: bold;
-  border-bottom: 5px solid #005CAF;
+  border-bottom: 4px solid #005CAF;
   color: #005CAF;
   background-color: rgba(0, 92, 175, 0.1);
 }
@@ -107,7 +109,7 @@
 .Load_top_button:hover {
   color: #005CAF;
   font-weight: bold;
-  border-bottom: 5px solid #005CAF;
+  border-bottom: 4px solid #005CAF;
 }
 
 .Save_Load_content {
@@ -117,6 +119,8 @@
   flex-wrap: wrap;
   justify-content: space-evenly;
   align-items: center;
+  overflow-y: auto;
+  padding: 20px;
 }
 
 .Save_Load_content_element {
@@ -124,8 +128,10 @@
   background: linear-gradient(-45deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.075));
   overflow: hidden;
   //border: 1px solid rgba(255, 255, 255, 1);
-  width: 17.5%;
-  height: 45%;
+  width: 450px;
+  aspect-ratio: 1;
+  display: block;
+  margin: 20px;
   //box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   animation: Elements_in 1s ease-out forwards, Elements_in_transform 1s ease-out;
   opacity: 0;
@@ -143,7 +149,7 @@
 .Save_Load_content_element_top {
   font-family: "思源宋体", serif;
   width: 100%;
-  height: 12%;
+  height: 15%;
   display: flex;
 }
 
@@ -224,9 +230,9 @@
 }
 
 .Save_Load_content_miniRen_bg {
-  background-size: cover;
   height: 100%;
   width: 100%;
+  object-fit: cover;
   background-position: center;
 }
 
diff --git a/packages/webgal/src/UI/Menu/menu.module.scss b/packages/webgal/src/UI/Menu/menu.module.scss
index 143af6a87..538b31176 100644
--- a/packages/webgal/src/UI/Menu/menu.module.scss
+++ b/packages/webgal/src/UI/Menu/menu.module.scss
@@ -1,3 +1,5 @@
+@import "../Utils/constants.scss";
+
 .Menu_main {
   width: 100%;
   height: 100%;
@@ -6,10 +8,12 @@
   //backdrop-filter: blur(1px);
   animation: Menu_ShowSoftly 0.5s forwards;
   background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
+  justify-items: center;
 }
 
 .Menu_TagContent {
   width: 100%;
+  max-width: $defaultScreenWidth;
   height: 90%;
 }
 
diff --git a/packages/webgal/src/UI/Title/Title.tsx b/packages/webgal/src/UI/Title/Title.tsx
index 18ce4c417..9934354f6 100644
--- a/packages/webgal/src/UI/Title/Title.tsx
+++ b/packages/webgal/src/UI/Title/Title.tsx
@@ -54,6 +54,7 @@ const Title: FC = () => {
           className={applyStyle('Title_main', styles.Title_main)}
           style={{
             backgroundImage: showBackground,
+            backgroundPosition: 'center',
             backgroundSize: 'cover',
           }}
         >
diff --git a/packages/webgal/src/UI/Utils/HorizontalScroll.tsx b/packages/webgal/src/UI/Utils/HorizontalScroll.tsx
new file mode 100644
index 000000000..0d6e95f93
--- /dev/null
+++ b/packages/webgal/src/UI/Utils/HorizontalScroll.tsx
@@ -0,0 +1,25 @@
+import { CSSProperties, ReactNode, useEffect, useRef } from "react";
+
+export function HorizontalScroll(props: {children: ReactNode, className?: string, style?: CSSProperties}){
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const scrollContainer = scrollRef.current;
+    if (!scrollContainer) return;
+
+    const handleWheel = (event: WheelEvent) => {
+      event.preventDefault(); // 阻止默认垂直滚动
+      scrollContainer.scrollLeft += event.deltaY; // 将滚轮上下滑动转换为横向滚动
+      event.stopPropagation() // 阻止事件往下传递
+    };
+
+    scrollContainer.addEventListener("wheel", handleWheel);
+    return () => scrollContainer.removeEventListener("wheel", handleWheel);
+  }, []);
+
+  return (
+    <div ref={scrollRef} className={props.className} style={props.style}>{props.children}</div>
+  );
+};
+
+export default HorizontalScroll;
\ No newline at end of file
diff --git a/packages/webgal/src/UI/Utils/constants.scss b/packages/webgal/src/UI/Utils/constants.scss
new file mode 100644
index 000000000..5dd3a1d81
--- /dev/null
+++ b/packages/webgal/src/UI/Utils/constants.scss
@@ -0,0 +1,2 @@
+$defaultScreenWidth: 2560px;
+$defaultScreenHeight: 1440px;
\ No newline at end of file
diff --git a/packages/webgal/src/index.scss b/packages/webgal/src/index.scss
index 475ab2533..aae53564f 100644
--- a/packages/webgal/src/index.scss
+++ b/packages/webgal/src/index.scss
@@ -1,7 +1,5 @@
 @charset "UTF-8";
 
-@import "Core/util/constants";
-
 @font-face {
   font-family: "思源宋体";
   /*noinspection CssUnknownTarget*/
@@ -75,8 +73,6 @@ code {
 }
 
 #root {
-  width: $screenWidth;
-  height: $screenHeight;
   overflow: hidden;
   /*position: absolute;*/
   /*top: 0;*/