• 在实际项目开发过程中，如果做了div约束或者自适应的话，页面的缩放可能没有问题，但是直接设置为100%的话，页面缩放可能就有问题了 解决办法就是，实时计算页面缩放的百分比，然后将当前div的宽度设置为对应的百分比，代码如下:

<template>
<div class="course-list-wrapper" :style="{'width': courseListWidth}" id="course-list">
</template>

<script>
export default {
	data(){
	    return {
	      courseListWidth: '100%'
	    }
	},
	mounted() {
	    this.windowZoom();
	    window.onresize = () => {
	      return (() => {
	        this.windowZoom()
	      })()
	    };
    },
	methods:{
		windowZoom (){
	      let ratio = 1,
	          screen = window.screen,
	          ua = navigator.userAgent.toLowerCase();

	      if (window.devicePixelRatio !== undefined) {
	        ratio = window.devicePixelRatio;
	      }else if (~ua.indexOf('msie')) {
	        if (screen.deviceXDPI && screen.logicalXDPI) {
	          ratio = screen.deviceXDPI / screen.logicalXDPI;
	        }
	      }else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
	        ratio = window.outerWidth / window.innerWidth;
	      }

	      if (ratio){
	        ratio = Math.round(ratio * 100);
	      }
	      this.courseListWidth = ratio+'%';
	    }
	}
}
</script>

• 关于 window.devicePixelRatio

Window接口的devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率的比率。

这个值也可以理解为像素大小的比率：一个CSS像素的大小与一个物理像素的大小。更简单地说，这告诉浏览器应该用多少屏幕上的实际像素来绘制一个CSS像素。

这在处理标准显示器与HiDPI或Retina显示器的渲染差异时非常有用，后者使用更多的屏幕像素来绘制相同的对象，从而使图像更清晰。