diff --git a/app/src/main/assets/h5/css/app.css b/app/src/main/assets/h5/css/app.css
index e1e37ae..69f4244 100644
--- a/app/src/main/assets/h5/css/app.css
+++ b/app/src/main/assets/h5/css/app.css
@@ -169,13 +169,16 @@ body {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
+  text-align: center;
 }
 
-/* 小时 / 分钟：上下两行大字，等宽数字避免宽度抖动 */
-/* Hour / minute: stacked large lines, tabular numerals avoid width jitter */
+/* 小时 / 分钟：上下两行大字，等宽数字避免宽度抖动；
+   font-size 由 JS 按「卡片短边一半」动态设置 */
+/* Hour / minute: stacked large lines, tabular numerals avoid width jitter;
+   font-size is set by JS to half the card's short side */
 .time-card .h,
 .time-card .m {
-  font-size: clamp(30px, 4vw, 54px);
   font-weight: 300;
   line-height: 1.05;
   font-variant-numeric: tabular-nums;
diff --git a/app/src/main/assets/h5/js/pages/home.js b/app/src/main/assets/h5/js/pages/home.js
index 4ce19c5..df2a865 100644
--- a/app/src/main/assets/h5/js/pages/home.js
+++ b/app/src/main/assets/h5/js/pages/home.js
@@ -60,9 +60,25 @@ function renderTimeCard() {
     <div class="m">${fmtMinute(now)}</div>
     <div class="sec">${fmtSec(now)}</div>
     <div class="date-full">${fmtFullDate(now)}</div>`;
+  applyTimeCardSize(el);
   return el;
 }
 
+// 时间卡字号自适应：HH/MM 字号 = 卡片短边的一半，随卡片尺寸变化
+// Adaptive time-card font: HH/MM font-size = half the card's short side,
+// tracking the card size
+function applyTimeCardSize(el) {
+  const check = () => {
+    const w = el.clientWidth;
+    const h = el.clientHeight;
+    if (w <= 0 || h <= 0) return;
+    const size = Math.floor(Math.min(w, h) / 2);
+    el.querySelectorAll('.h, .m').forEach(n => { n.style.fontSize = size + 'px'; });
+  };
+  check();
+  requestAnimationFrame(check);
+}
+
 // 其他卡片占位：仅显示 id，后续 Task 接具体卡片渲染
 // Other cards placeholder: show id only; concrete renderers land in later tasks
 function renderGenericCard(id) {