页面自动缩放

页面自动缩放功能位于 src/config/siteConfig.ts 文件中的 pageScaling 对象，用于在不同屏幕宽度下自动缩放页面内容，确保在大屏幕上获得一致的视觉体验。

配置项

src/config/siteConfig.ts

pageScaling: {
  enable: true,      // 是否开启自动缩放
  targetWidth: 2000, // 目标宽度，低于此宽度时开始缩放
},

配置项说明

配置项	类型	默认值	说明
enable	boolean	true	是否启用页面自动缩放功能
targetWidth	number	2000	目标参考宽度（像素）

工作原理

自动缩放算法基于 CSS transform: scale() 实现：

1. 当浏览器视口宽度 小于 targetWidth 时，页面按比例缩小
2. 当浏览器视口宽度 大于等于 targetWidth 时，页面保持原始大小
3. 缩放比例 = 视口宽度 / targetWidth

缩放示例

以 targetWidth: 2000 为例：

视口宽度	缩放比例	效果
2000px	1.0（100%）	原始大小
1600px	0.8（80%）	缩小到 80%
1200px	0.6（60%）	缩小到 60%
1000px	0.5（50%）	缩小到 50%

使用场景

大屏幕适配

自动缩放功能主要用于确保在超宽显示器上页面布局不会过度拉伸：

pageScaling: {
  enable: true,
  targetWidth: 2000, // 适合 2K/4K 显示器
},

禁用自动缩放

如果不需要自动缩放功能，可以将其关闭：

pageScaling: {
  enable: false, // 禁用自动缩放
},

注意事项

1. 自动缩放会影响整个页面的显示大小，包括文字、图片和交互元素。
2. targetWidth 值越小，页面在相同视口宽度下显示越大。
3. 在移动端（视口宽度通常 < 768px）缩放效果可能过于明显，建议配合响应式设计使用。
4. 启用自动缩放后，页面的实际可点击区域也会随缩放比例变化。
5. 建议将 targetWidth 设置为你的设计稿宽度，以获得最佳还原效果。