浏览器动态设置缩放倍数

需求

最近客户提出：界面太小，希望可以放大缩小界面的功能。虽然浏览器的Ctrl+加号与Ctrl+减号可以实现，但挡不住用户就是不懂，没办法只能添加该功能。

效果图

默认大小

缩小

放大

代码

<template>
  <div>
  	<div>
		<h3 class="content-title">界面缩放</h3>
        <div class="content-item-one">缩放比例：</div>
        <div class="content-item-two">
        	<el-input-number v-model="scaling" :step="25" :min="50" :max="300" size="mini"
              @change="handleChange"></el-input-number> %
        </div>
     </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      scaling: null // 缩放比例
    }
  },
  created() {
  	this.getScaling()
  },
  methods: {
    // 获取缩放比例
    getScaling() {
      this.scaling = Math.floor(window.devicePixelRatio * 100)
    },
    // 设置缩放比例
    handleChange(val) {
      document.body.style.zoom = val / 100
    }
  }
}
</script>