目录

一、自适应长度宽度，不留白

 二、等比例放大缩小，会留白，但页面不会变形

------------------------------------------------------------------------demo完整，可直接使用

注意：demo中用到页面全屏插件-screenfull

screenfull基本用法：

isFullscreen : 是否是全屏状态
isEnabled: 判断是否支持全屏

toggle: 调用 screenfull.toggle() 可以双向切换全屏与非全屏

需先安装：

npm install screenfull --save

一、自适应长度宽度，不留白

<template>
  <div class="content" :style="style">
    <button @click="screenfullClick">{{ isFullscreen ? '退出全屏' : '全屏展示' }}</button>
  </div>
</template>

<script setup lang="ts">
import screenfull from 'screenfull'
import { ref, onMounted, onUnmounted, computed } from 'vue'

// 是否全屏
let isFullscreen = ref(false)

// 缩放比例
let scaleX = ref(1)
let scaleY = ref(1)

//  点击切换全屏
const screenfullClick = () => {
  if (screenfull.isEnabled) screenfull.toggle()
}

// 计算属性修改元素缩放比例
let style = computed(() => {
  const obj = {
    transform: `scaleX(${scaleX.value}) scaleY(${scaleY.value})   translate(-50%, -50%)`
  }
  return obj
})
onMounted(() => {
  // 挂载完成触发一次
  currentScreen()
  // 监视浏览器视口变化
  window.addEventListener('resize', currentScreen)
})

// 浏览器改变触发
const currentScreen = () => {
  // 获取到缩放比，设置它
  scaleX.value = getScaleX()
  scaleY.value = getScaleY()
  isFullscreen.value = screenfull.isFullscreen
}

const getScaleX = () => {
  // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
  return window.innerWidth / 1920
}

const getScaleY = () => {
  // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
  return window.innerHeight / 1080
}

onUnmounted(() => {
  // 移除监视视口变化
  window.removeEventListener('resize', currentScreen)
})
</script>

<style lang="scss" scoped>
.content {
  width: 1920px;
  height: 1080px;
  background-color: red;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
}
</style>

 二、等比例放大缩小，会留白，但页面不会变形

<template>
  <div class="content" :style="style">
    <button @click="screenfullClick">{{ isFullscreen ? '退出全屏' : '全屏展示' }}</button>
  </div>
</template>

<script setup lang="ts">
import screenfull from 'screenfull'
import { ref, onMounted, onUnmounted, computed } from 'vue'

// 是否全屏
let isFullscreen = ref(false)

// 缩放比例
let scale = ref(1)

//  点击切换全屏
const screenfullClick = () => {
  if (screenfull.isEnabled) screenfull.toggle()
}

// 计算属性修改元素缩放比例
let style = computed(() => {
  const obj = {
    transform: `scale(${scale.value}) translate(-50%, -50%)`
  }
  return obj
})
onMounted(() => {
  // 挂载完成触发一次
  currentScreen()
  // 监视浏览器视口变化
  window.addEventListener('resize', currentScreen)
})

// 浏览器改变触发
const currentScreen = () => {
  // 获取到缩放比，设置它
  scale.value = getScale()
  isFullscreen.value = screenfull.isFullscreen
}

const getScale = () => {
  // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
  const ww = window.innerWidth / 1920
  const wh = window.innerHeight / 1080
  return ww < wh ? ww : wh
}

onUnmounted(() => {
  // 移除监视视口变化
  window.removeEventListener('resize', currentScreen)
})
</script>

<style lang="scss" scoped>
.content {
  width: 1920px;
  height: 1080px;
  background-color: red;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
}
</style>