[JavaScript]检测浏览器是否处于缩放状态的两种方法
一、window.devicePixelRatio
很多文章都是介绍这个方法来检测网页是否被缩放,因为在PC上,页面的devicePixelRatio
一般是1
。很多网站也是用的这个方法:
if(window.devicePixelRatio !== 1){
alert('页面处于缩放状态');
}
然而这种方法并不准确。现在的显示设备大都拥有高分辨率,如果使用 Windows 默认的缩放级别,字体会过小,可能看不清,所以通常用户会把 Windows 的缩放级别调整为 1.25 或更高:
这种情况下,window.devicePixelRatio
就不再等于1
:
所以,应该寻找一种更准确的办法。
二、window.outerWidth 与 window.innerWidth
window.innerWidth
是网页可见区域的宽度,它有一个重要的特点:值会随着页面的缩放变化。页面放大的时候,虽然文字、图片变大了,但我们能看到的内容变少了,也就是可视范围变小了,所以window.innerWidth
的值会变小,反之同理。
window.outerWidth
是浏览器窗口的宽度,包含浏览器的边框。窗口在最大化状态下,浏览器左右两边是没有边框的,这个时候,这两个值是相等的:
在这种情况下,根据window.innerWidth
的特性,如果window.outerWidth
与window.innerWidth
的值不相等,就可以判断浏览器处于缩放状态。但是,在窗口非最大化的情况下,即使页面没有缩放,这两个值也会有很小的差值,就是两边浏览器边框的宽度,我们需要处理这种情况。
窗口在非最大化的状态下,左右会有比较细的边框,不同的操作系统下,不同的浏览器,边框的宽度都会有些不同。目前在 Windows 10 下主流的浏览器左右边框的宽度都是比较小的,例如 Chrome,边框只有一条线,可能只是 1 像素:
可以假定一个阈值,例如,如果两个值的差小于 10,我们就不认为浏览器处于缩放状态,反之则认为浏览器处于缩放状态。代码如下:
function isZoom(){
const outerWidth = window.outerWidth,
innerWidth = window.innerWidth;
if(outerWidth - innerWidth > 10) {
return alert('放大');
}
if(innerWidth - outerWidth > 10) {
return alert('缩小');
}
alert('正常');
}
注意:
10
是我随意定的一个数值,并不严谨,需要调研各种浏览器的边框宽度才能得出较准确的数值。
调整浏览器缩放,得到结果如下:
放大状态检测:
正常状态检测:
缩小状态检测:
End