/**
 * @author trsoliu
 * @date  2019-12-05
 * @description 校正windows頁面在系統進行縮放後導致頁面被放大的問題，通常放大比例是125%、150%
 * **/

class DevicePixelRatio {
  constructor() {
    //this.flag = false;
  }
  //獲取系統型別
  _getSystem() {
    var agent = navigator.userAgent.toLowerCase()
    //		var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
    //		if(isMac) {
    //			return false;
    //		}
    //現只針對windows處理，其它系統暫無該情況，如有，繼續在此新增
    if (agent.indexOf('windows') >= 0) {
      return true
    }
  }
  //獲取頁面縮放比例
  //	_getDevicePixelRatio() {
  //		let t = this;
  //	}
  //監聽方法相容寫法
  _addHandler(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false)
    } else if (element.attachEvent) {
      element.attachEvent('on' + type, handler)
    } else {
      element['on' + type] = handler
    }
  }
  //校正瀏覽器縮放比例
  _correct() {
    //頁面devicePixelRatio（裝置畫素比例）變化後，計算頁面body標籤zoom修改其大小，來抵消devicePixelRatio帶來的變化。
    document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio
  }
  //監聽頁面縮放
  _watch() {
    let t = this
    t._addHandler(window, 'resize', function() {
      //注意這個方法是解決全域性有兩個window.resize
      //重新校正
      t._correct()
    })
  }
  //初始化頁面比例
  init() {
    let t = this
    if (t._getSystem()) {
      //判斷裝置，目前只在windows系統下校正瀏覽器縮放比例
      //初始化頁面校正瀏覽器縮放比例
      t._correct()
      //開啟監聽頁面縮放
      t._watch()
    }
  }
}
export default DevicePixelRatio

使用方式

引入

import DevicePixelRatio from './utils/devicePixelRatio.js'

使用

new DevicePixelRatio().init()

優點

可以強制控制縮放，與縮放前幾乎不會有任何差異

缺點

對於滑鼠拖拽時間，canvas滑鼠互動事件都會有偏移，所以只適合極其簡單的專案