50 lines
1.5 KiB
Markdown
50 lines
1.5 KiB
Markdown
|
# 修复画面超出屏幕问题
|
|||
|
|
|
|||
|
|
## 1. 问题分析
|
|||
|
|
- 画面超出屏幕的主要原因是当前的缩放逻辑存在问题
|
|||
|
|
- App.vue中设置了固定的body和#app尺寸（1920x1080）
|
|||
|
|
- ScreenAdapter组件的缩放逻辑可能计算错误
|
|||
|
|
- 可能存在缩放比例方向错误的问题
|
|||
|
|
|
|||
|
|
## 2. 修复方案
|
|||
|
|
### 2.1 方案选择
|
|||
|
|
- 调整缩放逻辑，使用等比例缩放并限制最大缩放比例
|
|||
|
|
- 确保内容始终在屏幕范围内
|
|||
|
|
- 保持原有设计的视觉效果
|
|||
|
|
|
|||
|
|
### 2.2 具体实现
|
|||
|
|
1. **修改ScreenAdapter组件**
|
|||
|
|
- 更改缩放比例计算逻辑，使用等比例缩放
|
|||
|
|
- 添加屏幕边界限制，确保内容不超出屏幕
|
|||
|
|
- 优化缩放比例方向
|
|||
|
|
|
|||
|
|
2. **调整App.vue样式**
|
|||
|
|
- 移除或调整固定的body和#app尺寸
|
|||
|
|
- 确保根元素能自适应屏幕
|
|||
|
|
|
|||
|
|
3. **优化缩放策略**
|
|||
|
|
- 使用最小缩放比例，确保内容完全显示
|
|||
|
|
- 调整transform-origin，确保内容居中显示
|
|||
|
|
- 处理不同屏幕比例的适配
|
|||
|
|
|
|||
|
|
## 3. 实现步骤
|
|||
|
|
1. 修改ScreenAdapter组件的缩放计算逻辑
|
|||
|
|
2. 调整缩放比例，使用等比例缩放
|
|||
|
|
3. 添加屏幕边界限制
|
|||
|
|
4. 调整App.vue的样式设置
|
|||
|
|
5. 测试不同屏幕尺寸下的显示效果
|
|||
|
|
6. 验证画面是否不再超出屏幕
|
|||
|
|
|
|||
|
|
## 4. 预期效果
|
|||
|
|
- 画面不再超出屏幕
|
|||
|
|
- 保持原有设计的视觉效果
|
|||
|
|
- 内容居中显示
|
|||
|
|
- 适配不同尺寸的屏幕
|
|||
|
|
- 保持良好的用户体验
|
|||
|
|
|
|||
|
|
## 5. 技术要点
|
|||
|
|
- 等比例缩放计算
|
|||
|
|
- 屏幕边界限制
|
|||
|
|
- transform-origin调整
|
|||
|
|
- 响应式设计
|
|||
|
|
- 不同屏幕比例适配
|