首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >pc端屏幕显示设置缩放比例对页面布局的适配

pc端屏幕显示设置缩放比例对页面布局的适配

作者头像
李维亮
发布2022-12-03 09:14:37
1K0
发布2022-12-03 09:14:37
举报
文章被收录于专栏:李维亮的博客李维亮的博客

利用device-pixel-ratio单独适配像素比

@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 () {
  this.handleScreen()
  window.onresize = () => {
    this.handleScreen()
  }
},
methods: {
    handleScreen(){
      const zoom = this.detectZoom();
      console.log(zoom, 'MMMMMMMMMMMMMMM')
      const scale = 100 / Number(zoom);
      console.log('scale', scale, typeof scale)
    },
    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;
    },
  }
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-11-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档