From 8b43d2fb35fe5874ea66382226a3ff686b3f010f Mon Sep 17 00:00:00 2001
From: ysm <cleverysm@163.com>
Date: Mon, 23 Mar 2026 22:51:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=97=B6=E9=92=9F=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80=EF=BC=8C=E9=98=B2=E6=AD=A2?=
 =?UTF-8?q?=E5=B0=8F=E5=B1=8F=E5=B9=95=E6=BA=A2=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为小屏幕添加更保守的尺寸计算
- 调整数码管字体大小与高度匹配
- 添加溢出控制防止超出容器

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.css |  5 +++++
 src/App.tsx | 25 ++++++++++++-------------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/App.css b/src/App.css
index 47e1678..d647ae7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -35,7 +35,10 @@
   align-items: center;
   flex: 1;
   width: 100%;
+  max-width: 100vw;
+  overflow: hidden;
   box-sizing: border-box;
+  padding: 0 20px;
 }
 
 /* Digital clock style (default) */
@@ -46,6 +49,8 @@
   text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
   letter-spacing: 0.05em;
   white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .style-button {
diff --git a/src/App.tsx b/src/App.tsx
index 85e5d6f..32dd69e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,18 +6,14 @@ import './App.css'
 type ClockStyle = 'digital' | 'flip' | 'roll'
 
 function DigitalClock({ time, size }: { time: string; size: number }) {
-  // Match width with flip/roll clocks
-  // Total flip/roll width ≈ 5.1 * (size / 1.6) because size is now scaled
-  // Actually size passed in is already the final size
-  // Flip: 6 * (size * 0.75) + 2 * (size * 0.3) = 4.5 * size + 0.6 * size = 5.1 * size
-  // Digital: 8 chars, each char ≈ fontSize * 0.6 wide in monospace = 4.8 * fontSize
-  // To match: 4.8 * fontSize = 5.1 * size => fontSize = size * 1.06
-  const fontSize = Math.floor(size * 1.06)
+  // Match visual height with flip/roll clocks
+  // Use slightly smaller than size to prevent overflow, but keep height similar
+  const fontSize = Math.floor(size * 0.95)
 
   return (
     <div
       className="digital-clock"
-      style={{ fontSize: `${fontSize}px` }}
+      style={{ fontSize: `${fontSize}px`, lineHeight: '1' }}
     >
       {time}
     </div>
@@ -36,14 +32,17 @@ function App() {
     return () => clearInterval(timer)
   }, [])
 
-  // Responsive clock size - target 90% of page width
+  // Responsive clock size - fit within screen width
   useEffect(() => {
     const updateSize = () => {
       const width = window.innerWidth
-      // Direct calculation: target 90% width
-      const baseSize = (width * 0.9) / 5.1
-      const newSize = Math.floor(baseSize * 2.0) // Scale up more
-      setClockSize(Math.min(newSize, 320))
+      // More conservative for small screens
+      const margin = width < 480 ? 40 : 60
+      const availableWidth = width - margin
+      // Use larger divisor for small screens to prevent overflow
+      const divisor = width < 480 ? 7 : 6
+      const newSize = Math.floor(availableWidth / divisor)
+      setClockSize(Math.min(newSize, 200))
     }
     updateSize()
     window.addEventListener('resize', updateSize)