Update public/index.html

public/index.html

@@ -296,16 +296,28 @@
       70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
       100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
     }
-    @media (max-width: 600px) { /* 降低阈值，确保覆盖更多小屏幕设备如 iPhone */
+    @media (max-width: 900px) { /* 中等屏幕，调整为3列 */
       #summary {
-        grid-template-columns: 1fr; /* 小屏幕单列显示 */
+        grid-template-columns: repeat(3, 1fr); /* 3列显示 */
         gap: 10px;
       }
       #summary div {
         padding: 10px;
       }
       #summary span {
-        font-size: 20px; /* 小屏幕字体略小 */
+        font-size: 20px; /* 字体略小 */
+      }
+    }
+    @media (max-width: 600px) { /* 小屏幕，调整为2列 */
+      #summary {
+        grid-template-columns: repeat(2, 1fr); /* 2列显示 */
+        gap: 8px;
+      }
+      #summary div {
+        padding: 8px;
+      }
+      #summary span {
+        font-size: 18px; /* 字体进一步缩小 */
       }
       .user-servers {
         grid-template-columns: 1fr !important; /* 小屏幕强制单列显示实例卡片，使用 !important 提高优先级 */
@@ -333,6 +345,18 @@
         margin-bottom: 20px;
       }
     }
+    @media (max-width: 400px) { /* 超小屏幕，仍保持2列，但进一步压缩 */
+      #summary {
+        grid-template-columns: repeat(2, 1fr); /* 仍为2列 */
+        gap: 6px;
+      }
+      #summary div {
+        padding: 6px;
+      }
+      #summary span {
+        font-size: 16px; /* 字体更小 */
+      }
+    }
     .login-overlay, .confirm-overlay, .loading-overlay {
       position: fixed;
       top: 0;