# 大屏开发调试指南

## 项目配置

- **设计基准**: 2048 x 1080
- **缩放方案**: VScaleScreen
- **目标设备**: 超级大屏（投屏显示）

## 开发调试方法

### 方法 1: Chrome DevTools 自定义设备（推荐）

1. 打开 Chrome DevTools (F12)
2. 点击设备模拟按钮 (Ctrl/Cmd + Shift + M)
3. 在设备下拉菜单中选择 "Edit..."
4. 添加自定义设备：
   - Device Name: `Large Screen 2048x1080`
   - Width: `2048`
   - Height: `1080`
   - Device pixel ratio: `1`
   - User agent string: (保持默认)
5. 选择刚创建的设备进行调试

### 方法 2: 浏览器窗口缩放

1. 将浏览器窗口调整为合适大小
2. 使用浏览器缩放功能 (Ctrl/Cmd + 鼠标滚轮)
3. 调整到能看到完整布局的比例

### 方法 3: 响应式设计模式

在 DevTools 中：
1. 选择 "Responsive" 模式
2. 手动输入宽度: `2048`
3. 手动输入高度: `1080`

## 字体大小说明

当前字体配置已针对 2048x1080 优化：

| Class | 实际大小 | 适用场景 |
|-------|---------|---------|
| `text-xs` | 12.8px | 辅助文字、标注 |
| `text-sm` | 15.2px | 次要文字 |
| `text-base` | 17.6px | 正文 |
| `text-lg` | 20.8px | 小标题 |
| `text-xl` | 24px | 中标题 |
| `text-2xl` | 28px | 大标题 |
| `text-3xl` | 33.6px | 特大标题 |
| `text-4xl` | 40px | 主标题 |
| `text-5xl` | 51.2px | 超大标题 |
| `text-6xl` | 64px | 巨大标题 |

## VScaleScreen 工作原理

```
设计基准 (2048x1080)
    ↓
VScaleScreen 自动缩放
    ↓
实际显示设备 (任意分辨率)
```

**示例：**
- 在 1920x1080 屏幕上：内容会略微缩小
- 在 3840x2160 (4K) 屏幕上：内容会放大约 2 倍
- 在更大的 LED 屏上：内容会等比例放大

## 常见问题

### Q: 在我的电脑上字体看起来太大了？
A: 这是正常的！因为你的设计基准 (2048x1080) 比普通电脑屏幕大。请使用上述方法在正确的分辨率下调试。

### Q: 如何确认实际大屏的分辨率？
A: 
1. 询问现场技术人员
2. 常见大屏分辨率：
   - 1920x1080 (Full HD)
   - 2560x1440 (2K)
   - 3840x2160 (4K)
   - 7680x4320 (8K)

### Q: 需要修改 VScaleScreen 的尺寸吗？
A: 通常不需要。保持 2048x1080 即可，VScaleScreen 会自动适配。除非：
- 实际大屏比例不是 16:9
- 需要针对特定分辨率优化

### Q: 如何微调字体大小？
A: 修改 `uno.config.ts` 中的 `fontSize` 配置，然后重启开发服务器。

## 测试清单

部署前请确认：

- [ ] 在 2048x1080 分辨率下所有文字清晰可读
- [ ] 所有布局元素位置正确
- [ ] 动画效果流畅
- [ ] 图片清晰不模糊（建议使用 2x 或 3x 分辨率的图片）
- [ ] 在实际大屏上测试（如果可能）

## 性能优化建议

1. **图片资源**: 使用 WebP 格式，准备高分辨率版本
2. **字体**: 使用 Web Font，确保在大屏上渲染清晰
3. **动画**: 使用 CSS transform 和 opacity，避免触发重排
4. **测试**: 在接近实际大屏的设备上测试性能

## 联系与支持

如有问题，请联系开发团队。