前端如何解决pc端屏幕显示设置缩放比例对页面布局的影响？

最新推荐文章于 2023-11-21 12:42:41 发布

原创最新推荐文章于 2023-11-21 12:42:41 发布 · 7.5k 阅读

37 ·

CC 4.0 BY-SA版权

浏览器专栏收录该内容

12 篇文章

订阅专栏

当用户将笔记本电脑缩放设置为125%时，对前端页面布局产生影响，表现为高分屏与普分屏显示不一致。解决方法包括在媒体查询中适配device-pixel-ratio，将组件单位转为rem，并动态调整:root的font-size。此外，通过监听窗口resize事件，动态调整页面缩放比例，确保在不同设备上保持一致的视觉效果。

现在很多笔记本电脑都推荐将缩放设置为125%，等比例放大显示。(垃圾Windows

这对我们前端的页面的布局会产生一些影响

首先，单独的响应式布局hold不住这个问题，因为出问题的是device-pixel-ratio。
问题现象是高分屏下整好的东西，在普分屏下会放大；而普分屏下整好的东西，在高分屏上会缩小。
重现这个问题不需要高分屏，直接用Ctrl++或者Ctrl+-出来的效果是跟高分屏一致的（所以搞定这个问题之后，也可以同时预防用户误触网页缩放）。另外恢复是Ctrl+Num0
解决的关键就是你得在媒体适配里写device-pixel-ratio单独适配像素比；另外，需要把绝大多数组件由px单位转换为rem单位，因为需要在前边提到的device-pixel-ratio里调节:root的font-size`，以达到动态缩放的目的
（加上兼容）写好以后的代码类似：

@media all
and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18),
    (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18),
    (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) {
    :root {
        font-size: 14px;
    }
}
@media all
and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28),
    (-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28),
    (min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) {
    :root {
        font-size: 13px;
    }
}
@media all
and (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4),
    (-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4),
    (min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) {
    :root {
        font-size: 12px;
    }
}
@media all
and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6),
    (-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6),
    (min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) {
    :root {
        font-size: 10px;
    }
}
@media all
and (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8),
    (-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8),
    (min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) {
    :root {
        font-size: 9px;
    }
}
@media all
and (-moz-min-device-pixel-ratio: 1.81) and (-moz-max-device-pixel-ratio: 2.1),
    (-webkit-min-device-pixel-ratio: 1.81) and (-webkit-max-device-pixel-ratio: 2.1),
    (min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) {
    :root {
        font-size: 8px;
    }
}

vue解决办法

 mounted() {
      window.onresize = ()=>{
        this.handleScreen()
      }
    },
methods: {
      handleScreen(){
        const m = this.detectZoom();
        console.log(m, 'MMMMMMMMMMMMMMM')
        document.body.style.zoom = 100/Number(m);
      },
      detectZoom () {
		      let ratio = 0,
		        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);
		      }
		      return ratio;
		  },
}