111 lines
3.0 KiB
Markdown
111 lines
3.0 KiB
Markdown
|
# 大屏开发调试指南
|
|||
|
|
|
|||
|
|
## 项目配置
|
|||
|
|
|
|||
|
|
- **设计基准**: 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. **测试**: 在接近实际大屏的设备上测试性能
|
|||
|
|
|
|||
|
|
## 联系与支持
|
|||
|
|
|
|||
|
|
如有问题，请联系开发团队。
|