add

index.html

@@ -12,10 +12,14 @@
             height: 100vh;
             width: 100vw;
         }
+        body{
+            display: flex;
+        }
         canvas{
             display: block;
             position: absolute;
             inset: 0;
+            margin: auto;
         }
         .loading{
             height: 100%;

src/Game/Game.ts

@@ -50,6 +50,24 @@ export default class Game {
         height: 0,
     };
 
+    private screenInfo() {
+        const curDirection = detectOrient();
+        if (curDirection === EDirection.Portrait) {
+            const width = document.documentElement.clientWidth * 1136 / 640
+            const height = document.documentElement.clientWidth
+            return {
+                widght: height,
+                height: width,
+            }
+        }
+        const width = document.documentElement.clientHeight * 1136 / 640
+        const height = document.documentElement.clientHeight
+        return {
+            widght: width,
+            height: height,
+        }
+    }
+
     getInfo() {
         return this.info;
     }
@@ -60,8 +78,9 @@ export default class Game {
     }
 
     updateView() {
-        let screenWidght = document.documentElement.clientWidth;
-        let screenHeight = document.documentElement.clientHeight;
+        const screenInfo = this.screenInfo()
+        let screenWidght = screenInfo.widght;
+        let screenHeight = screenInfo.height;
         this.renderer.resize(screenWidght, screenHeight);
         let offsetWidth = 0;
         let offsetHeight = 0;
@@ -114,8 +133,9 @@ export default class Game {
     }
 
     init() {
-        let screenWidght = document.documentElement.clientWidth;
-        let screenHeight = document.documentElement.clientHeight;
+        const screenInfo = this.screenInfo()
+        let screenWidght = screenInfo.widght;
+        let screenHeight = screenInfo.height;
         const stage = new Container();
         stage.name = "root";
         let renderer = autoDetectRenderer({