LQ博客 www.lqblogs.com
arrows
nav

PC端如何根据不同的设备像素比(devicePixelRatio)做适配

作者:LQ 来源:原创 发布时间:2021-09-18 浏览量:2172 评论:2 点赞:1

实践思路:用rem布局,再结合JS动态控制document.documentElement.style.fontSize大小。


注意事项:win和mac系统的设备像素比(devicePixelRatio)不同,win系统默认devicePixelRatio=1(可以通过桌面右键->显示设置),而mac系统默认devicePixelRatio=2


代码输出

((win) => {
  var doc = win.document
  var docEl = doc.documentElement
  var initFontSize = 16
  var tid

  function refreshRem() {
    var agent = navigator.userAgent.toLowerCase()
    var isMac = /macintosh|mac os x/i.test(navigator.userAgent)
    var rem = initFontSize
    if (~agent.indexOf('win32') || ~agent.indexOf('wow32') || ~agent.indexOf('win64') || ~agent.indexOf('wow64')) {
      rem = initFontSize / win.devicePixelRatio
    }
    if (isMac) {
      rem = initFontSize / (win.devicePixelRatio / 2)
    }
    docEl.style.fontSize = rem + 'px'
  }

  win.addEventListener('resize', () => {
    clearTimeout(tid)
    tid = setTimeout(refreshRem, 300)
  }, false)
  win.addEventListener('pageshow', (e) => {
    if (e.persisted) {
      clearTimeout(tid)
      tid = setTimeout(refreshRem, 300)
    }
  }, false)

  if (doc.readyState === 'complete') {
    refreshRem()
  } else {
    doc.addEventListener('DOMContentLoaded', (e) => {
      refreshRem()
    }, false)
  }

  refreshRem()
})(window)

实际引用:

1、单页面应用场景下,直接在main.js里面引入即可

2、多页面应用场景下,直接每个页面引入即可


javascript
如果你感觉本文章对你有帮助的话,那就点赞、打赏或订阅一下吧
点赞(1)
打赏
倒踩(1)
关闭 感谢您的支持,我会继续努力
微信支付
支付宝支付
扫码打赏,建议金额1-20元
浏览量(2172)
讨论本篇文章(2)
liqiang 2024-03-26 17:30:02 不错不错
liqiang 2024-03-26 17:30:12 谢谢
回复 回复 取消
查看更多平评论
发表评论

最多访问文章

最新文章