页面缩放适配方案

本文旨在阐述web端页面和移动端(H5，小程序，app等)页面布局以及在不同尺寸的屏幕上进行自适应缩放的解决方案。让网页能够根据不同设备的屏幕尺寸和分辨率自动调整布局和内容大小，以提供良好的用户体验。

1. web浏览器端

大屏页面

1. 场景描述:

• 大多数大屏都是放在web端浏览器中进行展示(桌面端不做考虑)。并且会有相对比较固定的屏幕设备来展示大屏内容。
• 大屏固定展示设备的屏幕长宽比与我们平时使用的电脑屏幕比例会有差异，我们只需要保证大屏展示设备的和与大屏展示设备屏幕长宽比一直的屏幕进行完美适配。平时使用设备简单做兼容即可。

2. 解决方案&具体标准：

• 使用CSS样式 transform: scale(缩值) 来解决。

• 具体代码参考(具体大屏项目可能会有不同)

  // comfort.js
  
  /*
   * 做页面自适应
   * 0. 项目跟元素 id = root
   * 1. width 为适应基准
   * 2. 无论 width height 如何变化，都要输出 16 / 9 比例的页面
   * 3. 客户的设备分辨率 1920 * 1080
   */
  
  const W = 1920
  const H = 1080
  
  export default () => {
    window.onresize = () => {
      document.querySelector('#root').style.transform = `scale(${document.body.offsetWidth / W})`
      document.querySelector('#root').style.transformOrigin = `left top 0px`
      document.querySelector('#root').style.width = `${W}px`
      document.querySelector('#root').style.height = `${H}px`
    }
    document.querySelector('#root').style.transform = `scale(${document.body.offsetWidth / W})`
    document.querySelector('#root').style.transformOrigin = `left top 0px`
    document.querySelector('#root').style.width = `${W}px`
    document.querySelector('#root').style.height = `${H}px`
  }
  
  

  // vue项目的App.vue组件中
  
  import comfort from './comfort.js'
  
  onMounted(() => {
    comfort()
  })
  
  

管理后台

2. 移动端

H5

小程序

App

未完待续...