在考慮 筆記本 或者 顯示器 默認設置125%或者150%縮放，導致布局錯亂的解決方法
一、為什么會出現有這個問題？
- 因為現在很多14寸的筆記本，出廠默認就是150%的顯示。導致很多時候我們的項目，自己開發的時候都是按照100%比例來開發的，上線了就會發現這個問題。
vue項目util下新建js1、文件名devicePixelRatio.js
class DevicePixelRatio { constructor() { // this.flag = false; } // 獲取系統類型 _getSystem() { // let flag = false; 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() { let t = this; // 頁面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; 2、全局導入App.vue
