后端转前端开发，按照设计图实现好的网站在本机显示正常，客户笔记本电脑上显示错位。后来发现是很多笔记本电脑的 windows 系统默认会设置缩放，一般比例是 125%，也有 150%、175%、200%等。

最好的解决办法是通过媒体查询多写几套样式代码，但是这样工作量增加很多，简单的解决办法就是根据屏幕像素比自动设置网页的 zoom 缩放比例，js 代码如下：

版本1：

<script>
(function () {
        var ratio = 0,
        screen = window.screen,
        ua = navigator.userAgent.toLowerCase();
        let view = document.querySelector('body');
    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 !== 1) {
        if (ratio >= 2) {
            ratio = ratio / 2
        } else if (ratio >= 3) {
            ratio = ratio / 3
        }
        view.style.zoom = -0.62 * ratio + 1.65;
    }
    //console.log("dpi", ratio)
})(window);
</script>

版本2：

<script>
    // 屏幕适配
    const t = window.devicePixelRatio   // 获取下载的缩放 125% -> 1.25    150% -> 1.5
    // var heigth_screen = window.screen.height;    // 获取整个屏幕的分辨率
    const width_screen = window.screen.width;
    let zoom = 1
    if (t !== 1) {
      zoom = (1 / t) * zoom;   // 就去修改页面的缩放比例
    }
    if (width_screen < 1366) {
      zoom = (width_screen / 1366) * zoom;   // 就去修改页面的缩放比例
    }
    document.body.style.zoom = zoom;   // 就去修改页面的缩放比例
</script>

以上两个版本代码任选其一，加到网页尾部的 </body> 前即可。