如何在所有现代浏览器中检测页面缩放级别?

2020/10/03 17:21 · javascript ·  · 0评论
  1. 如何在所有现代浏览器中检测页面缩放级别?尽管此线程说明了如何在IE7和IE8中执行此操作,但我找不到很好的跨浏览器解决方案。

  2. Firefox存储页面缩放级别以供将来访问。在首页加载时,我能否获得缩放级别?加载页面发生缩放更改时我在某处阅读过它可以工作

  3. 有没有办法捕获'zoom'事件?

我需要这样做,因为我的某些计算是基于像素的,并且缩放时它们可能会波动。


@tfl给定的修改样本

缩放时,此页面会提示不同的高度值。[jsFiddle]

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
    </head>
    <body>
        <div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie nisl sit amet vehicula. Donec semper tristique blandit. Vestibulum adipiscing placerat mollis.</div>
        <button onclick="alert($('#xy').height());">Show</button>
    </body>
</html>

现在,这比第一次提出这个问题时更大。通过阅读我能找到的所有答复和博客文章,这里是一个摘要。我还设置了此页面,以测试所有这些测量缩放级别的方法

编辑(2011-12-12):我添加了一个可以克隆的项目:https : //github.com/tombigel/detect-zoom

  • IE8:(screen.deviceXDPI / screen.logicalXDPI或相对于默认缩放的缩放级别,screen.systemXDPI / screen.logicalXDPI
  • IE7:(var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;由于此示例此答案
  • 仅限FF3.5screen.width/媒体查询屏幕宽度(请参见下文)(利用了screen.width使用设备像素但MQ宽度使用CSS像素这一事实-感谢Quirksmode width
  • FF3.6:未知方法
  • FF4 +:媒体查询二进制搜索(请参见下文)
  • WebKithttps : //www.chromestatus.com/feature/5737866978131968(感谢Teo的评论)
  • WebKit:使用来测量div的首选大小-webkit-text-size-adjust:none
  • WebKit:(自r72591以来中断document.width / jQuery(document).width()(感谢上述Dirk van Oosterbosch)。要获得以设备像素表示的比率(而不是相对于默认缩放),请乘以window.devicePixelRatio
  • 旧版WebKit?(未经验证):(parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth来自此答案
  • Operadocument.documentElement.offsetWidth/ position:fixed; width:100%div的宽度从这里开始Quirksmode的widths说这是一个bug; innerWidth应该是CSS px)。我们使用position:fixed元素获取视口的宽度,包括滚动条所在的空间document.documentElement.clientWidth排除此宽度。自2011年某个时候以来,这种情况已被打破;我知道再也无法在Opera中获得缩放级别了。
  • 其他塞巴斯蒂安(Sebastian)的Flash解决方案
  • 不可靠:监听鼠标事件并测量screenX中的更改/ clientX中的更改

这是Firefox 4的二进制搜索,因为我不知道它公开的任何变量:

<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
  var style = document.getElementById('binarysearch');
  var dummyElement = document.getElementById('dummyElement');
  style.sheet.insertRule('@media (' + property + ':' + r +
                         ') {#dummyElement ' +
                         '{text-decoration: underline} }', 0);
  var matched = getComputedStyle(dummyElement, null).textDecoration
      == 'underline';
  style.sheet.deleteRule(0);
  return matched;
};
var mediaQueryBinarySearch = function(
    property, unit, a, b, maxIter, epsilon) {
  var mid = (a + b)/2;
  if (maxIter == 0 || b - a < epsilon) return mid;
  if (mediaQueryMatches(property, mid + unit)) {
    return mediaQueryBinarySearch(
        property, unit, mid, b, maxIter-1, epsilon);
  } else {
    return mediaQueryBinarySearch(
        property, unit, a, mid, maxIter-1, epsilon);
  }
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
    'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
    'min-device-width', 'px', 0, 6000, 25, .0001);
</script>

你可以试试

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);

这将为您提供浏览器在非视网膜显示器上的缩放百分比级别。对于高DPI /视网膜显示,它将产生不同的值(例如,对于Chrome和Safari为200,对于Firefox为140)。

要捕捉缩放事件,您可以使用

$(window).resize(function() { 
// your code 
});

对我来说,对于Chrome / Webkit,document.width / jQuery(document).width()它不起作用。当我将窗口缩小并放大到站点中时,出现水平滚动条,document.width / jQuery(document).width()默认缩放比例不等于1。这是因为document.width在视口之外包括文档的一部分。

使用window.innerWidthwindow.outerWidth工作。出于某种原因,在Chrome中,outerWidth以屏幕像素为单位,innerWidth以css像素为单位。

var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
  zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
  zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
  zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
  zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
  zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
  zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
  zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
  zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
  zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
  zoomLevel = "5";
} else {
  zoomLevel = "unknown";
}

我和我的同事使用了https://github.com/tombigel/detect-zoom中的脚本此外,我们还动态创建了一个svg元素并检查其currentScale属性。它在Chrome以及大多数浏览器上都可以正常运行。在FF上,必须关闭“仅缩放文本”功能。大多数浏览器支持SVG 在撰写本文时,已在IE10,FF19和Chrome28上进行了测试。

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);

我发现这篇文章很有帮助。非常感谢yonran。在实施他提供的某些技术时,我想传递一些发现的知识。在FF6和Chrome 9中,添加了对来自JS的媒体查询的支持,这可以大大简化确定FF缩放所需的媒体查询方法。请在此处查看MDN上的文档出于我的目的,我只需要检测浏览器是放大还是缩小,就不需要实际的缩放系数。我能够用一行JavaScript来得到答案:

var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;

结合使用IE8 +和Webkit解决方案(也都是单行),我能够检测到绝大多数浏览器的缩放情况,而这些浏览器仅用几行代码就能达到我们的应用程序。

zoom = ( window.outerWidth - 10 ) / window.innerWidth

这就是您所需要的。

截至2016年1月,我对此有一个解决方案。经过测试可在Chrome,Firefox和MS Edge浏览器中工作。

原理如下。收集相距较远的2个MouseEvent点。每个鼠标事件都带有屏幕和文档坐标。测量两个坐标系中两个点之间的距离。尽管由于浏览器的配置,坐标系之间存在可变的固定偏移量,但是如果页面未缩放,则之间的距离应相同。指定“相距较远”(我将其设为12像素)的原因是,可以检测到较小的缩放变化(例如90%或110%)。

参考:https :
//developer.mozilla.org/en/docs/Web/Events/mousemove

脚步:

  1. 添加鼠标移动监听器

    window.addEventListener("mousemove", function(event) {
        // handle event
    });
    
  2. 从鼠标事件捕获4个测量值:

    event.clientX, event.clientY, event.screenX, event.screenY
    
  3. 在客户端系统中测量两点之间的距离d_c

  4. 测量屏幕系统中两点之间的距离d_s

  5. 如果d_c!= d_s,则应用缩放。两者之间的差异告诉您缩放程度。

注意:仅很少进行距离计算,例如,当您可以采样一个新鼠标事件而不是上一个鼠标事件时。

局限性:假设用户将鼠标至少移动一点,并且直到此时才知道缩放。

您可以使用Visual Viewport API

window.visualViewport.scale;

它是标准配置,可在台式机和移动设备上使用:浏览器支持

在Internet Explorer 7、8和9中,此方法有效:

function getZoom() {
    var screen;

    screen = document.frames.screen;
    return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}

添加“ +0.9”可防止舍入错误(否则,将浏览器缩放比例分别设置为105%和110%时,您将获得104%和109%)。

在IE6中不存在缩放,因此没有必要检查缩放。

我想出的是:

1)position:fixed <div>使用width:100%id = zoomdiv

2)页面加载时:

zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth

它为我ctrl+ctrl-变焦工作。

或者我可以将行添加到$(window).onresize()事件中以获取活动的缩放级别


码:

<script>
    var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;

    $(window).resize(function(){
        zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
        alert(zoom);    
    });
</script>
<body>
    <div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>

PS:这是我的第一篇文章,对不起任何错误

在基于Webkit的浏览器(Chrome,Safari)中,这对我非常有用:

function isZoomed() {
    var width, mediaQuery;

    width = document.body.clientWidth;
    mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';

    return !window.matchMedia(mediaQuery).matches;
}

似乎在Firefox中似乎不起作用。

在WebKit中也可以使用:

var zoomLevel = document.width / document.body.clientWidth;

基本上,我们有:

  • window.devicePixelRatio这同时考虑了浏览器级别的缩放*以及系统缩放/像素密度。

    *-在Mac / Safari上未考虑缩放级别
  • 媒体查询
  • vw/ vhCSS单位
  • resize 在缩放级别更改时触发的事件会导致窗口的有效大小更改

对于普通的UX应该足够了如果您需要检测缩放级别,则可能是UI设计不良的标志。

音调缩放较难追踪,目前尚未考虑。

移动设备上(使用适用于Android的Chrome浏览器或Opera Mobile),您可以通过window.visualViewport.scale检测缩放
https://developer.mozilla.org/zh-CN/docs/Web/API/Visual_Viewport_API

在Safari上检测:document.documentElement.clientWidth / window.innerWidth(如果未缩放设备,则返回1)。

您的计算仍然基于许多CSS像素。它们现在在屏幕上的大小不同。这就是整页缩放的重点。

您希望在192dpi设备上的浏览器上发生什么,因此通常为图像中的每个像素显示四个设备像素?现在,该设备以50%的缩放比例在一个设备像素中显示一个图像像素。

在Chrome上

var ratio = (screen.availWidth / document.documentElement.clientWidth);
var zoomLevel = Number(ratio.toFixed(1).replace(".", "") + "0");

尝试这个

alert(Math.round(window.devicePixelRatio * 100));

没有针对IE测试此功能,但是如果您elem使用

min-width: 100%

然后

window.document.width / elem.clientWidth

将为您提供浏览器的缩放级别(包括document.body.style.zoom系数)。

这是Chrome浏览器,在之后user800583答案...

我花了几个小时解决这个问题,但没有找到更好的方法,但是:

  • 有16个“ zoomLevel”而不是10
  • 当Chrome为全屏/最大化时,该比率为window.outerWidth/window.innerWidth,而当不是全屏/最大化时,该比率似乎为(window.outerWidth-16)/window.innerWidth,但是第二种情况可以接近第一种情况。

所以我来以下...

但是这种方法有局限性:例如,如果您在应用程序窗口中播放手风琴(迅速放大和缩小窗口的宽度),则尽管缩放比例没有改变(可能不是externalWidth和innerWidth,完全在同一时间更新)。

var snap = function (r, snaps)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return i; }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
);

并且如果您想要因素:

var snap = function (r, snaps, ratios)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return eval(ratios[i]); }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
            [ 0.25, '1/3', 0.5, '2/3', 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5 ]
);

只有移动设备有此解决方案(已通过Android测试):

jQuery(function($){

zoom_level = function(){

    $("body").prepend('<div class="overlay" ' +
                'style="position:fixed; top:0%; left:0%; ' +
                'width:100%; height:100%; z-index:1;"></div>');

    var ratio = $("body .overlay:eq(0)").outerWidth() / $(window).width();
    $("body .overlay:eq(0)").remove();

    return ratio;
}

alert(zoom_level());

});

如果要在缩放移动后立即缩放级别,则可能由于渲染延迟而不得不设置一些超时(但是我不确定,因为我没有对其进行测试)。

该答案基于有关devicePixelRatio的评论在user1080381的答案上​​错误返回。

我发现在使用台式机,Surface Pro 3和Surface Pro 4时,在某些情况下该命令也会错误返回。

我发现它可以在我的台式机上运行,​​但是SP3和SP4的编号彼此不同,台式机也不同。

我注意到,尽管SP3的恢复水平是我期望的缩放水平的1倍半。当我查看显示设置时,实际上SP3设置为150%,而不是台式机上的100%。

因此,注释的解决方案应该是将返回的缩放级别除以当前使用的计算机的比例。

通过执行以下操作,我可以在Windows设置中获取比例:

ManagementObjectSearcher searcher = new ManagementObjectSearcher("SELECT * FROM Win32_DesktopMonitor");
double deviceScale = Convert.ToDouble(searcher.Get().OfType<ManagementObject>().FirstOrDefault()["PixelsPerXLogicalInch"]);
int standardPixelPerInch = 96;
return deviceScale / standardPixelPerInch;

因此,对于我的SP3,此代码就是100%缩放的样子:

devicePixelRatio = 1.5
deviceScale = 144
deviceScale / standardPixelPerInch = 1.5
devicePixelRatio / (deviceScale / standardPixelPerInch) = 1

乘以user1080381原始答案中的100,您将获得100(%)的缩放比例。

目前是否可以正常运行,但仍需要按浏览器进行分隔。已在Chrome(75)和Safari(11.1)上成功测试(到目前为止,尚未找到用于FF的方法)。它还可以在视网膜显示屏上获得正确的缩放值,并在调整大小事件时触发计算。

    private pixelRatio() {
      const styleString = "(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)";
      const chromeRatio = (Math.round((this.window.outerWidth / this.window.innerWidth)*100) / 100);
      const otherRatio = (Math.round(window.devicePixelRatio * 100) / 100);
      const resizeValue = (this.isChrome()) ? chromeRatio : otherRatio;

      return resizeValue || (this.window.matchMedia && this.window.matchMedia(styleString).matches ? 2 : 1) || 1;
    }


  private isChrome():boolean {
    return (!!this.window.chrome && !(!!this.window.opera || this.window.navigator.userAgent.indexOf(' Opera') >= 0))
  }

  private chrome() {
    const zoomChrome = Math.round(((this.window.outerWidth) / this.window.innerWidth)*100) / 100;
    return {
      zoom: zoomChrome,
      devicePxPerCssPx: zoomChrome1 * this.pixelRatio()
    };
  }

在这里它不会改变!:

<html>
 <head>
  <title></title>
 </head>
<body>
 <div id="xy" style="width:400px;">
  foobar
 </div>
 <div>
  <button onclick="alert(document.getElementById('xy').style.width);">Show</button>
 </div>
</body>
</html>

创建一个简单的html文件,单击按钮。不论缩放级别如何:它将显示400px的宽度(至少使用firefox和ie8)

这可能会或可能不会帮助任何人,但是无论我尝试了什么CSS技巧,我都有一个页面无法正确居中,因此我编写了一个JQuery文件调用Center页面:

问题发生在浏览器的缩放级别上,页面会根据您是100%,125%,150%等来移动。

下面的代码在一个名为centerpage.js的JQuery文件中。

即使我的母版页已经有指向JQuery的链接,我也必须从我的页面链接到JQuery和该文件才能使其正常工作。

<title>Home Page.</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/centerpage.js"></script>

centerpage.js

// centering page element
function centerPage() {
    // get body element
    var body = document.body;

    // if the body element exists
    if (body != null) {
        // get the clientWidth
        var clientWidth = body.clientWidth;

        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var left = (windowWidth - bodyWidth) / 2;

        // this is a hack, but it works for me a better method is to determine the 
        // scale but for now it works for my needs
        if (left > 84) {
            // the zoom level is most likely around 150 or higher
            $('#MainBody').removeClass('body').addClass('body150');
        } else if (left < 100) {
            // the zoom level is most likely around 110 - 140
            $('#MainBody').removeClass('body').addClass('body125');
        }
    }
}


// CONTROLLING EVENTS IN jQuery
$(document).ready(function() {
    // center the page
    centerPage();
});

另外,如果您想将面板居中:

// centering panel
function centerPanel($panelControl) {
    // if the panel control exists
    if ($panelControl && $panelControl.length) {
        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var panelHeight = $panelControl.height();
        var panelWidth = $panelControl.width();

        // centering
        $panelControl.css({
            'position': 'absolute',
            'top': (windowHeight - panelHeight) / 2,
            'left': (windowWidth - panelWidth) / 2
        });

        // only need force for IE6
        $('#backgroundPanel').css('height', windowHeight);
    }
}

这是一个很久以前发布的问题,但是今天,当我在寻找相同的答案“如何检测放大和缩小事件”时,找不到适合所有浏览器的答案。

截至目前:对于Firefox / Chrome / IE8和IE9,放大和缩小触发window.resize事件。可以使用以下方法捕获:

$(window).resize(function() {
//YOUR CODE.
});

FireFox 16+仅使用JavaScript即可找到DPPX(缩放级别)的解决方法:

var dppx = (function (precision) {
  var searchDPPX = function(level, min, divisor) {
    var wmq = window.matchMedia;
    while (level >= min && !wmq("(min-resolution: " + (level/divisor) + "dppx)").matches) {
      level--;
    }
    return level;
  };

  var maxDPPX = 5.0; // Firefox 22 has 3.0 as maximum, but testing a bit greater values does not cost much
  var minDPPX = 0.1; // Firefox 22 has 0.3 as minimum, but testing a bit smaller values does not cost anything
  var divisor = 1;
  var result;
  for (var i = 0; i < precision; i++) {
    result = 10 * searchDPPX (maxDPPX, minDPPX, divisor);
    maxDPPX = result + 9;
    minDPPX = result;
    divisor *= 10;
  }

  return result / divisor;
}) (5);
function supportFullCss3()
{
    var div = document.createElement("div");
    div.style.display = 'flex';
    var s1 = div.style.display == 'flex';
    var s2 = 'perspective' in div.style;

    return (s1 && s2);
};

function getZoomLevel()
{
    var screenPixelRatio = 0, zoomLevel = 0;

    if(window.devicePixelRatio && supportFullCss3())
        screenPixelRatio = window.devicePixelRatio;
    else if(window.screenX == '0')
        screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
    else
    {
        var scr = window.frames.screen;
        screenPixelRatio = scr.deviceXDPI / scr.systemXDPI;
    }

    //---------------------------------------
    if (screenPixelRatio <= .11){ //screenPixelRatio >= .01 &&
      zoomLevel = "-7";
    } else if (screenPixelRatio <= .25) {
      zoomLevel = "-6";
    }else if (screenPixelRatio <= .33) {
      zoomLevel = "-5.5";
    } else if (screenPixelRatio <= .40) {
      zoomLevel = "-5";
    } else if (screenPixelRatio <= .50) {
      zoomLevel = "-4";
    } else if (screenPixelRatio <= .67) {
      zoomLevel = "-3";
    } else if (screenPixelRatio <= .75) {
      zoomLevel = "-2";
    } else if (screenPixelRatio <= .85) {
      zoomLevel = "-1.5";
    } else if (screenPixelRatio <= .98) {
      zoomLevel = "-1";
    } else if (screenPixelRatio <= 1.03) {
      zoomLevel = "0";
    } else if (screenPixelRatio <= 1.12) {
      zoomLevel = "1";
    } else if (screenPixelRatio <= 1.2) {
      zoomLevel = "1.5";
    } else if (screenPixelRatio <= 1.3) {
      zoomLevel = "2";
    } else if (screenPixelRatio <= 1.4) {
      zoomLevel = "2.5";
    } else if (screenPixelRatio <= 1.5) {
      zoomLevel = "3";
    } else if (screenPixelRatio <= 1.6) {
      zoomLevel = "3.3";
    } else if (screenPixelRatio <= 1.7) {
      zoomLevel = "3.7";
    } else if (screenPixelRatio <= 1.8) {
      zoomLevel = "4";
    } else if (screenPixelRatio <= 1.9) {
      zoomLevel = "4.5";
    } else if (screenPixelRatio <= 2) {
      zoomLevel = "5";
    } else if (screenPixelRatio <= 2.1) {
      zoomLevel = "5.2";
    } else if (screenPixelRatio <= 2.2) {
      zoomLevel = "5.4";
    } else if (screenPixelRatio <= 2.3) {
      zoomLevel = "5.6";
    } else if (screenPixelRatio <= 2.4) {
      zoomLevel = "5.8";
    } else if (screenPixelRatio <= 2.5) {
      zoomLevel = "6";
    } else if (screenPixelRatio <= 2.6) {
      zoomLevel = "6.2";
    } else if (screenPixelRatio <= 2.7) {
      zoomLevel = "6.4";
    } else if (screenPixelRatio <= 2.8) {
      zoomLevel = "6.6";
    } else if (screenPixelRatio <= 2.9) {
      zoomLevel = "6.8";
    } else if (screenPixelRatio <= 3) {
      zoomLevel = "7";
    } else if (screenPixelRatio <= 3.1) {
      zoomLevel = "7.1";
    } else if (screenPixelRatio <= 3.2) {
      zoomLevel = "7.2";
    } else if (screenPixelRatio <= 3.3) {
      zoomLevel = "7.3";
    } else if (screenPixelRatio <= 3.4) {
      zoomLevel = "7.4";
    } else if (screenPixelRatio <= 3.5) {
      zoomLevel = "7.5";
    } else if (screenPixelRatio <= 3.6) {
      zoomLevel = "7.6";
    } else if (screenPixelRatio <= 3.7) {
      zoomLevel = "7.7";
    } else if (screenPixelRatio <= 3.8) {
      zoomLevel = "7.8";
    } else if (screenPixelRatio <= 3.9) {
      zoomLevel = "7.9";
    } else if (screenPixelRatio <= 4) {
      zoomLevel = "8";
    } else if (screenPixelRatio <= 4.1) {
      zoomLevel = "8.1";
    } else if (screenPixelRatio <= 4.2) {
      zoomLevel = "8.2";
    } else if (screenPixelRatio <= 4.3) {
      zoomLevel = "8.3";
    } else if (screenPixelRatio <= 4.4) {
      zoomLevel = "8.4";
    } else if (screenPixelRatio <= 4.5) {
      zoomLevel = "8.5";
    } else if (screenPixelRatio <= 4.6) {
      zoomLevel = "8.6";
    } else if (screenPixelRatio <= 4.7) {
      zoomLevel = "8.7";
    } else if (screenPixelRatio <= 4.8) {
      zoomLevel = "8.8";
    } else if (screenPixelRatio <= 4.9) {
      zoomLevel = "8.9";
    } else if (screenPixelRatio <= 5) {
      zoomLevel = "9";
    }else {
      zoomLevel = "unknown";
    }

    return zoomLevel;
};

问题出在所用显示器的类型上,即4k显示器与标准显示器。到目前为止,Chrome最聪明的地方就是可以通过使用告诉我们缩放级别是多少window.devicePixelRatio,显然Chrome可以分辨出像素密度是什么,并且可以报告相同的数字以解决问题。

其他浏览器,没有那么多。IE和Edge可能是最差的,因为它们处理缩放级别的方式大不相同。要在4k显示器上获得相同大小的文本,必须选择200%,而不是在标准显示器上选择100%。

截至2018年5月,这是我必须检测一些最受欢迎的浏览器,Chrome,Firefox和IE11的缩放级别的方法。我告诉我缩放百分比是多少。对于IE,即使4k显示器实际为200%,它也会报告100%,但是文本大小实际上是相同的。

这是一个小提琴:https : //jsfiddle.net/ae1hdogr/

如果有人愿意刺探其他浏览器并更新小提琴,请这样做。我的主要目标是让这3个浏览器都涵盖在内,以检测人们是否使用大于100%的缩放比例来使用我的Web应用程序,并显示一条提示,提示出租人的缩放比例。

@media (min-width: 500px){
/* css here */
}

要么

@media (max-width: 500px){
/* css here */
}
本文地址:http://javascript.askforanswer.com/ruhezaisuoyouxiandailiulanqizhongjianceyemiansuofangjibie.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!