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

Question

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

这对我们前端的页面的布局会产生一些影响，尤其是遇到这样的设计时：

顶部两侧的logo和菜单两侧的留白较少时，放大可能会导致两侧的logo和菜单显示不全。想问下大家有没有遇到过这样的情况，并提供下解决思路，设计角度和前端开发角度均可，谢谢。

---

谢谢各位的热心回答，我会认真参考各位的意见，解决好了我会在评论中进行回复。

Answer 1

这个坑还真踩过，前前后后花了小一个礼拜的工夫。

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

5. （加上兼容）写好以后的代码类似：

   @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;
       }
   }

6. 最后，我觉得我这个解决方案仅仅是解决问题，希望谁有更优雅的写法可以分享下~拜谢。

Answer 2

前段时间就是做了一个关于大屏数据展示的数据页面，当时遇到的问题类似，在13寸的笔记本上，按照设计的尺寸来做，但是大屏是一个50寸的小米电视来充当大屏，所以当在电视访问网站时，就出现了，不是等比例了，纠结了好长时间了，用了媒体查询，根据小米电视的大小，再写一套关于电视尺寸的css，但是还是涵盖不了所有的比例，这个也只能在，一定范围内，进行适配了，谁有好的方案，也可以提一下，?

Answer 3

真心想吐槽，这么小的屏幕这么大分辨率肯定小啊，要方法就别用那么高分辨率啊，用上了高分辨率又默认放大是为了啥？不知道是电脑厂商设置的，还是window系统设置的，前端不停有坑要填

---

function setWindowScale() {
    const scale = {
        1.5: '70%',
        1.25: '78%',
        1: '100%',
    }
    document.documentElement.style.zoom = scale[window.devicePixelRatio]

    // const diff = 1 - window.devicePixelRatio
    // document.documentElement.style.zoom = 100 + (diff * 100) + '%'
}

setWindowScale()
window.onresize = function () {
    setWindowScale()
}

Answer 4

结合媒体查询的响应式布局

Answer 5

之前踩这坑的时候 大概的查看了一下 缩放之后 浏览器里的渲染宽度在1200px的样子
所以如果是pc站页面最小兼容到1200px 应该问题不大

Answer 6

偷个懒 我是这么搞的

@media (max-width: 1919px) {
    html {
        zoom: 80%;
    }
}

Answer 7

亲测，我这个解决了你的问题，https://juejin.im/post/5de9c1...