Răsfoiți Sursa

merge: 收敛 night-shift/20260726-issue36-responsive 进 20260726 验收包

alchain 2 luni în urmă
părinte
comite
034f5474b4

+ 16 - 0
demos/md-html-narration/md-html-demo.html

@@ -2,6 +2,7 @@
 <html lang="zh-CN">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>md还是html,这是个蠢问题 · 解说 demo (v3 · 字幕+持续运动+修溢出)</title>
 <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
 <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
@@ -611,5 +612,20 @@ const App = () => (
 
 ReactDOM.createRoot(document.getElementById('root')).render(<App />);
 </script>
+
+<script>
+  // ── Fit 1920 stage to viewport ─────────────────────────────────
+  // ≥1920(含录制用的 1920×1080)保持 1:1 原尺寸不缩放;
+  // 窄于 1920 才缩小,减 40 是 body 左右各 20px 的 padding
+  (function () {
+    var root = document.getElementById('root');
+    function rescale() {
+      var cw = document.documentElement.clientWidth;
+      root.style.zoom = cw >= 1920 ? 1 : (cw - 40) / 1920;
+    }
+    rescale();
+    window.addEventListener('resize', rescale);
+  })();
+</script>
 </body>
 </html>

+ 14 - 0
demos/voiceover-demo/什么是token.html

@@ -2,6 +2,7 @@
 <html lang="zh-CN">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>什么是 token · narration demo</title>
 <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
 <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
@@ -197,5 +198,18 @@ const App = () => (
 
 ReactDOM.createRoot(document.getElementById('root')).render(<App />);
 </script>
+
+<script>
+  // ── Fit 1920 stage to viewport ─────────────────────────────────
+  // 只在窗口窄于 1920 时缩小,≥1920(含录制用的 1920×1080)保持 1:1 原尺寸
+  (function () {
+    var root = document.getElementById('root');
+    function rescale() {
+      root.style.zoom = Math.min(1, document.documentElement.clientWidth / 1920);
+    }
+    rescale();
+    window.addEventListener('resize', rescale);
+  })();
+</script>
 </body>
 </html>