增加手机自适应

onchain_scout_gate/static/app.js

@@ -550,7 +550,8 @@ function initMatrixRain() {
   function resize() {
     w = canvas.width = window.innerWidth;
     h = canvas.height = window.innerHeight;
-    const colCount = Math.min(48, Math.ceil(w / fontSize));
+    const maxCols = w < 640 ? 22 : 48;
+    const colCount = Math.min(maxCols, Math.ceil(w / fontSize));
     columns = Array.from({ length: colCount }, () => ({
       y: Math.random() * h,
       speed: 0.8 + Math.random() * 2.2,

onchain_scout_gate/static/style.css

@@ -646,6 +646,10 @@ pre {
     margin-top: 10px;
 }
 
+.matrix-form-row-wrap {
+    align-items: stretch;
+}
+
 .matrix-textarea {
     width: 100%;
     max-width: 100%;
@@ -1450,6 +1454,236 @@ pre {
     }
 }
 
+/* ── 手机 / 小平板自适应 ── */
+html {
+    -webkit-text-size-adjust: 100%;
+}
+
+body.matrix-theme {
+    overflow-x: hidden;
+}
+
+@media (max-width: 640px) {
+    .matrix-chrome {
+        padding-left: max(10px, env(safe-area-inset-left, 0px));
+        padding-right: max(10px, env(safe-area-inset-right, 0px));
+    }
+
+    .matrix-hud {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+        padding: 10px 0 8px;
+    }
+
+    .matrix-hud-wide {
+        grid-column: 1 / -1;
+    }
+
+    .matrix-hud-block {
+        min-height: 44px;
+        padding: 6px 8px;
+    }
+
+    .matrix-hud-val {
+        font-size: 11px;
+    }
+
+    .matrix-hud-val.mono {
+        font-size: 9px;
+    }
+
+    .matrix-header {
+        padding: 12px 0 10px;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .matrix-brand {
+        max-width: 100%;
+    }
+
+    .matrix-glitch-xl {
+        font-size: 1.2rem;
+        letter-spacing: 0.06em;
+    }
+
+    .matrix-tagline {
+        font-size: 10px;
+        line-height: 1.45;
+    }
+
+    .matrix-subdeck {
+        flex-wrap: wrap;
+    }
+
+    .matrix-header-actions {
+        width: 100%;
+        justify-content: space-between;
+        gap: 8px;
+    }
+
+    .matrix-pill {
+        font-size: 10px;
+        padding: 8px 10px;
+    }
+
+    .matrix-main {
+        padding: 12px 0 24px;
+        gap: 14px;
+    }
+
+    .matrix-main.matrix-crt-inner {
+        padding: 6px 8px max(20px, env(safe-area-inset-bottom, 0px));
+        margin-bottom: 8px;
+    }
+
+    .matrix-panel {
+        padding: 12px 10px;
+    }
+
+    .matrix-panel-head h2 {
+        font-size: 12px;
+        letter-spacing: 0.08em;
+        line-height: 1.35;
+    }
+
+    .matrix-panel-head-row,
+    .matrix-panel-head.matrix-panel-fold-toggle:not(.matrix-panel-head-row) {
+        gap: 8px;
+    }
+
+    .matrix-panel-fold-toggle {
+        min-height: 44px;
+        align-items: center;
+    }
+
+    .matrix-fold-head-right {
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        gap: 6px;
+    }
+
+    .matrix-chip {
+        font-size: 8px;
+        padding: 3px 6px;
+        letter-spacing: 0.08em;
+    }
+
+    .matrix-hint {
+        font-size: 10px;
+    }
+
+    .matrix-form-row,
+    .matrix-form-row-wrap {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .matrix-form-row input:not([type="checkbox"]),
+    .matrix-form-row select,
+    .matrix-form-row textarea,
+    .matrix-form-row .matrix-input {
+        width: 100% !important;
+        min-width: 0 !important;
+        max-width: 100%;
+        box-sizing: border-box;
+    }
+
+    .matrix-form-row input[type="checkbox"] {
+        width: auto;
+        min-height: 20px;
+        min-width: 20px;
+    }
+
+    .matrix-form-row label {
+        width: 100%;
+    }
+
+    .matrix-form-row .matrix-btn,
+    .matrix-form-row-wrap .matrix-btn {
+        width: 100%;
+        text-align: center;
+        min-height: 44px;
+    }
+
+    .matrix-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .matrix-btn {
+        min-height: 40px;
+        padding: 10px 14px;
+    }
+
+    .matrix-two-col {
+        gap: 12px;
+    }
+
+    .matrix-panel-nested {
+        padding: 10px 8px;
+    }
+
+    .matrix-pre {
+        max-height: 220px;
+        font-size: 9px;
+    }
+
+    .matrix-list-logs {
+        max-height: 240px;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .matrix-list .item {
+        font-size: 10px;
+        padding: 10px;
+    }
+
+    .matrix-list-item:hover {
+        transform: none;
+    }
+
+    .matrix-card:hover {
+        transform: none;
+    }
+
+    .matrix-rain-canvas {
+        opacity: 0.3;
+    }
+
+    .matrix-scanlines,
+    .matrix-noise {
+        opacity: 0.45;
+    }
+
+    .matrix-table {
+        min-width: 560px;
+    }
+}
+
+@media (max-width: 400px) {
+    .matrix-hud {
+        grid-template-columns: 1fr;
+    }
+
+    .matrix-glitch-xl {
+        font-size: 1.05rem;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .matrix-rain-canvas {
+        display: none;
+    }
+
+    .matrix-glitch-c,
+    .matrix-glitch-m,
+    .matrix-tagline-glow,
+    .matrix-btn-pulse,
+    .matrix-chip-magenta {
+        animation: none !important;
+    }
+}
+
 .matrix-table-wrap {
     width: 100%;
     overflow-x: auto;