Skip to content

v0.3.0-beta

Latest
Latest

Choose a tag to compare

View all tags
@github-actions github-actions released this 10 Jul 08:35
· 1 commit to main since this release
v0.3.0-beta
b7d421d

v0.3.0-beta (2025-07-10)

UI/UX 改進與響應式設計優化

✨ 新功能

🎯 全面響應式設計 (RWD)

  • 完整斷點支援: 大螢幕 (1200px+)、中大螢幕 (992px-1199px)、平板 (768px-991px)、大手機 (576px-767px)、手機 (320px-575px)、超小螢幕 (<320px)
  • 智能佈局調整: 容器大小、字體、按鈕尺寸根據螢幕自動調整
  • 觸控設備優化: 使用 @media (hover: none) and (pointer: coarse) 提供更大的觸控目標
  • 橫屏模式支援: 針對橫屏和低高度螢幕的特別優化
  • 高解析度螢幕: 增強陰影和視覺效果，支援 Retina 顯示器

📱 移動設備體驗改進

  • 自適應間距: 邊距和內邊距根據螢幕大小智能調整
  • 彈性佈局: 懸浮面板在小螢幕上重新定位，避免超出邊界
  • 可縮放字體: 從桌面的 4rem 到手機的 1.8rem 漸進式縮放
  • 觸控友好: 所有按鈕在觸控設備上符合 44px+ 的最佳實踐

🎨 視覺改進

  • 無滾動條設計: 完全隱藏滾動條，保持界面美觀
  • 版本信息顯示: 在幫助頁面底部添加版本號顯示

🔧 功能修復

🎵 音樂播放優化

  • 鬧鐘後行為修正: 時間到確認後，音樂不再自動恢復播放
  • 更合理的音樂控制: 用戶需手動重啟計時或手動播放音樂
  • 新增 clearAlarmState() 方法: 清除鬧鐘狀態，不恢復音樂播放

📱 界面穩定性

  • 滾動條問題解決: 移除在桌面版異常顯示的滾動條
  • 跨瀏覽器滾動條隱藏: 支援 Chrome、Firefox、Safari、Edge 的滾動條隱藏

🏗️ 技術改進

📊 CSS 架構優化

  • Mobile-first 設計: 從小螢幕開始設計，向上擴展
  • 模塊化 Media Queries: 7個主要斷點 + 3個特殊查詢
  • 更好的樣式組織: 響應式樣式統一管理，易於維護

🔄 PWA 更新

  • 版本管理: 更新 manifest.json 和 Service Worker 版本
  • 快取策略優化: 新版本自動更新快取

🛠️ 開發者體驗

📖 文檔更新

  • CLAUDE.md 增強: 新增響應式設計說明和斷點文檔
  • 版本號管理: 統一版本號顯示和管理

📋 技術細節

響應式斷點

/* 大螢幕 */ @media (min-width: 1200px)
/* 中大螢幕 */ @media (min-width: 992px) and (max-width: 1199px)
/* 平板 */ @media (min-width: 768px) and (max-width: 991px)
/* 大手機 */ @media (min-width: 576px) and (max-width: 767px)
/* 手機 */ @media (max-width: 575px)
/* 超小螢幕 */ @media (max-width: 320px)

特殊查詢

  • 觸控設備: @media (hover: none) and (pointer: coarse)
  • 橫屏模式: @media screen and (orientation: landscape) and (max-height: 600px)
  • 高解析度: @media (-webkit-min-device-pixel-ratio: 2)

🚀 性能優化

  • 更流暢的動畫: 針對不同螢幕尺寸優化動畫效果
  • 更好的觸控回饋: 增強移動設備上的互動體驗
  • 智能載入: 根據設備能力調整視覺效果複雜度

測試環境: 已在桌面 (Chrome, Firefox, Safari, Edge)、平板 (iPad)、手機 (iOS Safari, Android Chrome) 上測試
向後兼容性: 完全兼容舊版本的所有功能
升級建議: 建議所有用戶升級以獲得最佳的跨設備體驗

Assets 2
Loading