优化实战 第 55 期 - 系统推荐缩放比例的适配方案

在开发 web 应用时，发现 windows 系统经常推荐用户使用 125% 或 150% 的缩放比例，这样会导致视图页面也被进行缩放，从而严重影响用户体验

适配方案

• 方案思路

  缩放比例发生变化后，视图的设备像素比 devicePixelRatio 也会发生变化。可以通过计算 body 标签的 zoom 属性来抵消设备像素比带来的变化

• 代码实现

  判断是否是 windows 系统

  const isWindows = () => {
    const agent = navigator.userAgent.toLowerCase()
    return agent.includes('windows')
  }
  

  计算并修改 zoom 缩放值，来抵消 devicePixelRatio 带来的变化

  const adaptive = () => {
    if (isWindows()) {
      const dpr = window.devicePixelRatio
      const view = document.querySelector('body')
      view.style.zoom = 1 / dpr
    }
  }
  

关联知识

• CSS 中的 zoom 和 transform: scale() 的区别

  在缩放的同时 zoom 可以改变元素实际的大小和占用空间

  在缩放的同时 transform: scale() 不会改变元素实际的大小和占用空间

• 详细了解设备像素比可参阅下文

  第 50 期 - 纯CSS的移动端H5适配方案

  一起学习，加群交流看 沸点