[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
