window.resize监听页面放大缩小不好用

window.resize 为什么不行？

对于用户使用键盘，比如 commond + + 和 common + - 缩放时，事情很好办，使用 resize 事件即可

window.addEventListener('resize', () => {
   console.log('resize', window.devicePixelRatio);
});

但是如果换成 Mac 的触摸板双指缩放就不行了

这个时候我们可以通过VisualViewport来实现

简单实现代码如下：

 window.visualViewport.addEventListener('resize', (e) => {
    console.log(e.target.scale, window.devicePixelRatio);
 });

经过测试，双指缩放 可以使用 e.target.scale 获取缩放比，键盘缩放，可以使用 window.devicePixelRatio , 使用 Math.max 取最大字就可以兼容两种情况

 window.visualViewport.addEventListener('resize', (e) => {
     const scale = Math.max(e.target.scale, window.devicePixelRatio);
     console.log('scale: ', scale);
 });