js获取笔记本屏幕的分辨率以及缩放到125%工作区域的高度

IT博客技术分享

已于 2022-11-28 10:03:52 修改

阅读量2.5k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

于 2022-10-12 14:40:36 首次发布

本文链接：https://blog.csdn.net/qq_41646249/article/details/127282305

版权

本文介绍了如何使用JavaScript判断笔记本屏幕的缩放比例，通过比较window.screen.availHeight来确定是100%还是125%、150%的缩放。还提供了一种Vue项目的解决方案，通过detectZoom.js来获取屏幕的高度和宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：现在笔记本很多买回来后默认的缩放都是125%，打开浏览器把页面的内容等于放大了1/4倍，研发开发都是在100%的缩放基础上研发的，所以这时需要研发的同志们来做适配了，那怎么区分笔记本的缩放比例是多少呢，获取方法如下：

第一种方法：获取当前工作区域的高度来判断，笔记本是否放大了，window.screen.availHeight > 1000 说明缩放选择的是100%，否则是125%、150%。

获取屏幕缩放比例

// 获取屏幕缩放比例
function getRatio(){
  var ratio=0;
  var screen=window.screen;
  var 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 !=