javascript中等比缩放界面，javascript界面全屏

1.js代码

// * 默认缩放值
  const scale = {
    width: '1',
    height: '1',
  }
  // * 设计稿尺寸（px）
  const baseWidth = 1920
  const baseHeight = 1080
  const rootElement=document.getElementById('#rootid')
  // * 需保持的比例（默认1.77778）
  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
  const calcRate = () => {
    // 当前宽高比
    const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
    if (appRef.value) {
      if (currentRate > baseProportion) {
        // 表示更宽
        scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
        scale.height = (window.innerHeight / baseHeight).toFixed(5)
        rootElement.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
      } else {
        // 表示更高
        scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
        scale.width = (window.innerWidth / baseWidth).toFixed(5)
        rootElement.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
      }
    }
  }
const windowDraw = () => {
    window.addEventListener('resize', resize)
  }
windowDraw();

2.vue3.0 实现

useDraw.ts文件

import { ref } from 'vue'

export default function useIndex():any {
  // * 指向最外层容器
  const appRef = ref()
  // * 定时函数
  const timer = ref(0)
  // * 默认缩放值
  const scale = {
    width: '1',
    height: '1',
  }
  // * 设计稿尺寸（px）
  const baseWidth = 1920
  const baseHeight = 1080

  // * 需保持的比例（默认1.77778）
  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
  const calcRate = () => {
    // 当前宽高比
    const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
    if (appRef.value) {
      if (currentRate > baseProportion) {
        // 表示更宽
        scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
        scale.height = (window.innerHeight / baseHeight).toFixed(5)
        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
      } else {
        // 表示更高
        scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
        scale.width = (window.innerWidth / baseWidth).toFixed(5)
        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
      }
    }
  }

  const resize = () => {
    clearTimeout(timer.value)
    timer.value = setTimeout(() => {
      calcRate()
    }, 200)
  }

  // 改变窗口大小重新绘制
  const windowDraw = () => {
    window.addEventListener('resize', resize)
  }

  return {
    appRef,
    calcRate,
    windowDraw,
  }
}　　　　　

3.全屏操作

    const fullscreenhandler= () => {
      debugger
      let element:any=window.document.documentElement;
      let document:any=window.document;
      if(!fullscreen.value){
        if(element.requestFullscreen){
          element.requestFullscreen();
        }else if(element.msRequestFullscreen){
          element.msRequestFullscreen();
        }else if(element.mozRequestFullscreen){
          element.mozRequestFullscreen();
        }else if(element.webkitRequestFullscreen){
          element.webkitRequestFullscreen();
        }
      }
      else{
        if(document.exitFullscreen){
          document.exitFullscreen();
        }else if(document.msExitFullscreen){
          document.msExitFullscreen();
        }else if(document.mozCancelFullscreen){
          document.mozCancelFullscreen();
        }else if(document.webkitExitFullscreen){
          document.webkitExitFullscreen()
        }
      }
      fullscreen.value=!fullscreen.value
}