optomize size

leoncoolmoon · leoncoolmoon · commit e2f452764ff5 · 2024-08-20T13:14:37.000+10:00
diff --git a/08-Tetris-Game/index.html b/08-Tetris-Game/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Tetris Game</title>
+    <meta name="viewport" content="user-scalable=no maximum-scale=1.0">
     <link rel="stylesheet" type="text/css" href="style.css" />
     <link rel="icon" href="https://leoncoolmoon.github.io/icon.png" />
 
diff --git a/08-Tetris-Game/style.css b/08-Tetris-Game/style.css
@@ -1,26 +1,34 @@
 body {
   overflow: hidden;
   background: #d7d7d7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vmin;
 }
+
 #tetris {
   width: 360px;
   border: 1px solid black;
   padding: 20px;
 }
+
 #canvas {
   width: 200px;
   height: 440px;
   background-color: #000;
   position: relative;
   color: #fff;
 }
+
 #canvas h1 {
   margin: 0;
   padding: 0;
   text-align: center;
   font-size: 30px;
   padding-top: 200px;
 }
+
 .piece {
   border: 1px solid white;
   position: absolute;
@@ -50,39 +58,48 @@ body {
   height: 19px;
   border: 1px solid white;
 }
+
 .type0 {
   background-color: #a000f0;
 }
+
 .type1 {
   background-color: #00f0f0;
 }
+
 .type2 {
   background-color: #f0a000;
 }
+
 .type3 {
   background-color: #0000f0;
 }
+
 .type4 {
   background-color: #00f000;
 }
+
 .type5 {
   background-color: #f00000;
 }
+
 .type6 {
   background-color: #f0f000;
 }
+
 #next_shape {
   position: relative;
   background-color: #000;
   border: 1px solid white;
   width: 110px;
   height: 110px;
 }
+
 #info {
   background-color: #000;
   color: #fff;
   float: right;
   width: 110px;
   height: 420px;
   padding: 10px;
-}
+}
