website_www/SCALE_DETECTION.md

改进的系统缩放检测功能

功能概述

这个功能可以自动检测Windows系统级别的显示缩放设置（如125%, 150%, 175%, 200%等），并使用多种智能策略来优化网页显示效果，避免了传统transform方案的文本模糊和布局问题。

实现原理

1. 精确检测: 使用多种方法检测系统缩放比例，包括设备像素比、屏幕比例等
2. 智能策略: 根据浏览器类型和环境自动选择最佳的缩放处理策略
3. CSS变量调整: 主要使用CSS变量和calc()函数来调整尺寸，保持文本清晰度
4. 动态适配: 实时监听缩放变化并应用相应的调整策略

核心文件

1. 统一缩放管理器 (src/utils/scaleManager.js)

• 集成检测和策略应用功能
• 精确检测系统缩放比例
• 多方法验证确保准确性
• 提供多种缩放处理策略
• 根据浏览器环境自动选择最佳策略
• 支持策略切换和自定义配置

2. 布局组件 (src/layouts/DefaultLayout.vue)

• 集成缩放管理器
• 管理全局缩放状态
• 集成调试信息组件

3. 缩放调整样式 (src/styles/scale-adjustments.scss)

• 使用CSS变量进行精确调整
• 针对不同缩放比例的优化样式
• 保持文本清晰度和布局稳定性

4. 调试组件 (src/components/common/ScaleDebugInfo.vue)

• 显示当前缩放信息（仅开发环境）
• 实时监控缩放变化

5. 测试页面 (src/pages/scale-test/Index.vue)

• 完整的缩放测试界面（仅开发环境）
• 策略选择和控制功能
• 详细的缩放和屏幕信息显示

缩放策略

1. CSS变量策略 (推荐)

• 使用CSS变量和calc()函数调整尺寸
• 保持文本清晰度
• 兼容性最好
• 适用于Chrome、Edge等现代浏览器

2. Viewport策略

• 通过调整viewport meta标签处理缩放
• 适用于Safari等浏览器
• 对移动端友好

3. 混合策略

• 结合CSS变量和轻微transform调整
• 适用于Firefox等浏览器
• 处理极端缩放比例

4. 无处理策略

• 完全依赖浏览器原生处理
• 适用于不需要特殊处理的场景

使用方法

自动启用

功能会在应用启动时自动启用，系统会根据浏览器环境自动选择最佳策略。

开发环境测试

1. 启动开发服务器: npm run dev
2. 访问测试页面: http://localhost:3000/scale-test
3. 在测试页面中可以：
   • 查看当前检测信息
   • 切换不同的缩放策略
   • 启用/禁用缩放处理
   • 重置策略设置
4. 在Windows系统设置中更改显示缩放
5. 观察页面的自动调整效果

调试信息

在开发环境中，页面右上角会显示缩放调试信息，包括：

• 当前系统缩放比例
• 应用的反向缩放比例
• 设备像素比
• 当前使用的策略

支持的缩放比例

• 100% (无缩放)
• 125%
• 150%
• 175%
• 200%
• 225%
• 250%
• 300%

API 使用

监听缩放变化

import { onScaleChange } from '@/utils/scaleManager.js'

onScaleChange((scale) => {
  console.log('当前缩放:', scale)
})

获取缩放信息

import { getScaleInfo } from '@/utils/scaleManager.js'

const info = getScaleInfo()
console.log('缩放信息:', info)
// {
//   detected: 1.25,      // 检测到的缩放比例
//   counter: 0.8,        // 反向缩放比例
//   shouldApply: true,   // 是否应该应用反向缩放
//   percentage: 125      // 缩放百分比
// }

控制缩放策略

import { setScaleStrategy, setScaleEnabled } from '@/utils/scaleManager.js'

// 设置策略
setScaleStrategy('css') // 'css', 'viewport', 'hybrid', 'none'

// 启用/禁用缩放处理
setScaleEnabled(false)

样式变量

系统会根据检测到的缩放比例设置CSS变量：

body[data-scale="125"] {
  --base-padding: 16px;
  --base-margin: 12px;
  --header-height: 60px;
}

注意事项

1. 性能影响: 反向缩放可能会轻微影响渲染性能，但在现代浏览器中影响很小
2. 文本清晰度: 在某些缩放比例下，文本可能会略显模糊，已通过CSS优化
3. 兼容性: 主要针对Windows系统的Chrome、Edge、Firefox浏览器优化
4. 移动端: 移动端设备通常不需要此功能，系统会自动跳过

故障排除

缩放检测不准确

• 检查浏览器缩放是否为100%
• 确认系统显示设置中的缩放比例
• 查看控制台是否有错误信息

页面显示异常

• 检查CSS样式是否被其他样式覆盖
• 确认 scale-adjustments.scss 是否正确引入
• 查看调试信息中的缩放数据

性能问题

• 可以通过设置环境变量禁用缩放检测
• 减少监听器的触发频率
• 优化CSS动画和过渡效果

配置选项

可以通过环境变量控制功能：

# 禁用缩放检测
VITE_DISABLE_SCALE_DETECTION=true

# 禁用调试信息
VITE_HIDE_SCALE_DEBUG=true