主 题
一句话：Windows 把显示缩放调到 125%/150% 后，页面整体被放大——用
devicePixelRatio反算body的zoom做补偿。
写在前面
在 Windows 笔记本上，系统「显示缩放」默认为 125% 或 150%。此时 window.devicePixelRatio 会大于 1，部分按物理像素写死的 H5 页面会显得过大、布局错位。Mac 上较少遇到，本文方案仅针对 Windows。
读完你能：在入口 JS 里初始化缩放校正，并在窗口 resize 时重新计算。
核心内容
原理
系统缩放提高后，浏览器报告的 devicePixelRatio 变大。通过对 document.body 设置 zoom = 1 / ratio（经系数调整后），视觉上抵消放大效果。
DevicePixelRatio 工具类
javascript
class DevicePixelRatio {
constructor() {
this.flag = false
}
_getSystem() {
const agent = navigator.userAgent.toLowerCase()
// 现只针对 Windows；Mac 等系统一般无此问题
return agent.indexOf('windows') >= 0
}
_addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false)
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler)
} else {
element['on' + type] = handler
}
}
_correct() {
let ratio = window.devicePixelRatio
// 笔记本下不能缩太多，经验系数 0.4
if (ratio > 1) {
ratio -= 0.4
}
document.getElementsByTagName('body')[0].style.zoom = 1 / ratio
}
_watch() {
const t = this
t._addHandler(window, 'resize', function () {
t._correct()
})
}
init() {
if (this._getSystem()) {
this._correct()
this._watch()
}
}
}
export default DevicePixelRatio使用方式
在应用入口（如 main.js）实例化并调用 init()：
javascript
import DevicePixelRatio from '@/utils/devicePixelRatio'
new DevicePixelRatio().init()踩坑
zoom非标准属性：Firefox 支持有限，移动端 WebView 行为不一致，生产环境需实测。- 系数
0.4是经验值：不同分辨率、不同缩放比例下可能需要微调，没有万能公式。 - 与 rem/vw 布局混用可能产生二次缩放，优先从设计稿与
meta viewport解决，JS 校正作兜底。 resize监听：若页面另有window.onresize逻辑，注意合并或防抖，避免互相覆盖。- 现代方案更推荐 CSS
transform: scale()+ 容器宽高，或直接用响应式单位，减少对zoom的依赖。
小结
- 问题根源：Windows 显示缩放 →
devicePixelRatio > 1→ 页面视觉放大。 - 做法：Windows 下用
body.style.zoom反向补偿，并监听resize。 - 长期更优：响应式布局 + 正确 viewport，而非全局 zoom hack。
全部评论(0)