浏览器分辨率获取

最新推荐文章于 2023-12-13 14:33:01 发布

weixin_48920202

最新推荐文章于 2023-12-13 14:33:01 发布

阅读量295

点赞数 1

文章标签： es6 javascript vue.js

本文链接：https://blog.csdn.net/weixin_48920202/article/details/119734882

版权

本文介绍了如何在Vue.js中获取浏览器的宽度、高度以及计算电脑屏幕的缩放比例。通过`document.body.clientWidth`和`document.body.clientHeight`可以获取窗口尺寸，而`detectZoom`函数则用于检测浏览器缩放，适用于不同浏览器环境。这在响应式设计和页面布局调整中非常有用。

摘要由CSDN通过智能技术生成

小知识
vue js获取当前浏览器的分辨率

// 宽度: document.body.clientWidth
// 高度: document.body.clientHeight

data() { // 可直接挂载到data数据上
    return {
        Width: document.body.clientWidth,
        Height: document.body.clientHeight,
    }
}

//这个可以获取当前浏览器和电脑缩放比例
detectZoom() {
   let ratio = 0
   const screen = window.screen
   const 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
},