①resize 事件 + devicePixelRatio：
当用户缩放页面的时候会触发窗体的 resize 事件，以及设备的 devicePixelRatio 也会跟着变化，可以在 resize 事件中检测 devicePixelRatio 和缩放事件之前的 devicePixelRatio 值进行对比，如果变化，则可以认为页面发生了缩放；
②matchMedia 检测 devicePixelRatio 变化：
window.matchMedia 这个对象包含若干属性和方法：
matches：布尔值，表示当前是否匹配指定的媒体查询；
media：字符串，返回编译后的媒体查询字符串；
onchange：媒体查询改变时候的回调；
matchMedia () 绑定的 change 事件，只会在查询状态改变时候触发，例如，原始的设备像素比（单位就是 dppx）是 1，则浏览器第一次放大和缩小的时候，change 事件会执行，因为状态从匹配变成了不匹配，但是，如果继续放大和缩小，则 change 事件不再触发，因为状态一直是不匹配。因此，逻辑实现的时候，需要时时更新媒体查询语句，绑定新的 change 事件，这样，任意的设备像素比变化都可以被检测到；
③outerWidth/innerWidth 方法：
window.outerWidth/window.innerWidth，把浏览器外部尺寸和窗体内部尺寸的比例作为缩放比例，但有个缺陷就是当开发开发者工具，同时浏览器侧面定位的时候，缩放比例计算会有严重的偏差，因为此时 innerWidth 的尺寸严重缩水；
④visualViewport 与手势缩放识别：
实际上页面的缩放比例，浏览器是提供了原生的 API 的，那就是 window.visualViewport.scale。visualViewport 对象包括很多属性，例如宽高、偏移大小等，其中，我认为最稀缺的属性就是 scale，可以返回当前页面因为双指缩放带来的缩放比例，但只能用于移动端；
（参考：www.zhangxinxu.com/wordpress/2…
