📱 网络时钟 - 响应式设计

一个响应式的网络时钟应用，优先优化 iPhone SE (320×568px)，同时完美支持各种设备屏幕。让你的退役 iPhone、iPad 或任何设备变成实用的时钟显示器。

✨ 功能特性

• ⏰ 24小时制时间显示 - 可选秒钟显示（默认开启）
• 📅 可选日期显示 - 通过设置开关控制
• 🎨 三种主题模式 - 自动/白天/夜间，智能切换
• 📱 全面响应式 - 支持手机、平板、桌面设备
• 🔄 横屏优化 - 智能布局调整
• ⛶ 全屏模式 - 一键隐藏浏览器地址栏
• 🔒 防休眠功能 - 多层机制保持屏幕常亮
• 💾 设置持久化 - 自动保存偏好设置

🚀 使用方法

在手机上使用

1. 上传到服务器

   • 将项目上传到 GitHub Pages、Netlify、Vercel 等免费托管平台

2. 添加到主屏幕

   • 在 Safari 访问你的网址
   • 点击「分享」→「添加到主屏幕」
   • 从主屏幕打开享受全屏体验

基础操作

• 设置显示 - 点击右上角齿轮 ⚙️，可切换秒钟/日期显示
• 切换主题 - 设置面板中选择：自动 🌓 / 白天 ☀️ / 夜间 🌙
• 全屏模式 - 点击全屏按钮 ⛶ 进入/退出全屏
• 横屏使用 - 旋转设备，时间和日期自动并排显示

iPhone 优化建议

• 设置 > 显示与亮度 > 自动锁定 > 永不
• 设置 > 专注模式 > 勿扰（避免通知干扰）
• 保持连接充电器以持续供电

📱 设备支持

设备类型	屏幕范围	适配状态
iPhone SE	320×568px	✅ 优先优化
iPhone 6/7/8/X/11/12 系列	375-414px	✅ 完美支持
iPhone Plus/Pro Max	414px+	✅ 完美支持
iPad 系列	768px+	✅ 完美支持
桌面浏览器	1024px+	✅ 完美支持

🎨 自定义样式

修改 style.css 中的 CSS 变量：

:root {
  --time-size: clamp(3rem, 18vw, 8rem);  /* 时间字体 */
  --date-size: clamp(1rem, 5vw, 2.5rem); /* 日期字体 */
}

修改主题颜色（深色主题为例）：

[data-theme="dark"] {
  --primary-bg: #000000;      /* 背景色 */
  --text-color: #ffffff;      /* 文字颜色 */
  --accent-color: #007aff;    /* 强调色 */
}

🔧 技术栈

• 纯 HTML/CSS/JavaScript - 无需框架或依赖
• 现代 CSS - clamp()、Flexbox、媒体查询实现响应式
• Web APIs - Wake Lock、Fullscreen、localStorage
• 7级媒体查询 - 精准适配小屏手机到桌面端

🐛 常见问题

Q: 屏幕还是会休眠？ A: 确保设备「自动锁定」设置为「永不」，从主屏幕打开应用（而非 Safari）

Q: 如何部署到 GitHub Pages？ A: 上传代码 → Settings > Pages → 选择主分支 → 访问 https://用户名.github.io/仓库名/

Q: 支持哪些设备？ A: 从 iPhone SE (320px) 到桌面显示器全覆盖，详见上方"设备支持"表格

📝 版本历史

v1.2.0 (2026-01-12)

响应式设计升级 + 数字宽度修复

• ✨ 全面响应式设计，支持从320px到桌面端的所有设备
• 📱 7级媒体查询系统，精准适配不同屏幕尺寸
• ⛶ 添加全屏功能按钮
• 🔧 修复数字宽度跳动问题（强制等宽数字）
• 🔧 修复设置面板无法滚动的问题

v1.1.0 (2026-01-11)

主题系统 + 秒钟显示

• 🎨 三种主题模式：自动/白天/夜间
• ⏱️ 可选秒钟显示功能
• 🔄 横屏模式优化
• ⚙️ 设置面板分组和改进

v1.0.0 (2026-01-11)

初始版本

• ⏰ 24小时制时间显示
• 📅 可选日期显示
• 🔒 多层防休眠机制
• 📱 iPhone SE 专门优化
• 💾 设置持久化存储

📄 许可证

MIT License - 自由使用、修改和分发

---

享受你的新时钟！ ⏰✨