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

yangtoude
  • 326

现在很多笔记本电脑都推荐将缩放设置为125%,等比例放大显示。
clipboard.png
这对我们前端的页面的布局会产生一些影响,尤其是遇到这样的设计时:

clipboard.png

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


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

回复
阅读 27.7k
6 个回答

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

  1. 首先,单独的响应式布局hold不住这个问题,因为出问题的是device-pixel-ratio
  2. 问题现象是高分屏下整好的东西,在普分屏下会放大;而普分屏下整好的东西,在高分屏上会缩小。
  3. 重现这个问题不需要高分屏,直接用Ctrl++或者Ctrl+-出来的效果是跟高分屏一致的(所以搞定这个问题之后,也可以同时预防用户误触网页缩放)。另外恢复是Ctrl+Num0
  4. 解决的关键就是你得在媒体适配里写device-pixel-ratio单独适配像素比;另外,需要把绝大多数组件由px单位转换为rem单位,因为需要在前边提到的device-pixel-ratio里调节:rootfont-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. 最后,我觉得我这个解决方案仅仅是解决问题,希望谁有更优雅的写法可以分享下~拜谢。

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

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

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

月列组长
  • 1
新手上路,请多包涵

偷个懒 我是这么搞的

@media (max-width: 1919px) {
    html {
        zoom: 80%;
    }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏