vue項(xiàng)目適配屏幕分辨率與屏幕的縮放適配詳細(xì)教程
筆記本或者顯示器 默認(rèn)設(shè)置125%或者150%縮放,導(dǎo)致布局錯(cuò)亂的解決方法
現(xiàn)在很多14寸的筆記本,出廠默認(rèn)就是150%的顯示。導(dǎo)致很多時(shí)候我們的項(xiàng)目,自己開發(fā)的時(shí)候都是按照100%比例來開發(fā)的,上線了就會發(fā)現(xiàn)這個(gè)問題
解決方案
vue項(xiàng)目utils下新建devicePixelRatio.js文件
class DevicePixelRatio { constructor() { // this.flag = false; } // 獲取系統(tǒng)類型 _getSystem() { // let flag = false; var agent = navigator.userAgent.toLowerCase(); // var isMac = /macintosh|mac os x/i.test(navigator.userAgent); // if(isMac) { // return false; // } // 現(xiàn)只針對windows處理,其它系統(tǒng)暫無該情況,如有,繼續(xù)在此添加 if (agent.indexOf('windows') >= 0) { return true; } } // 獲取頁面縮放比例 // _getDevicePixelRatio() { // let t = this; // } // 監(jiān)聽方法兼容寫法 _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(設(shè)備像素比例)變化后,計(jì)算頁面body標(biāo)簽zoom修改其大小,來抵消devicePixelRatio帶來的變化。 document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio; } // 監(jiān)聽頁面縮放 _watch() { let t = this; t._addHandler(window, 'resize', function() { // 注意這個(gè)方法是解決全局有兩個(gè)window.resize // 重新校正 t._correct() }) } // 初始化頁面比例 init() { let t = this; if (t._getSystem()) { // 判斷設(shè)備,目前只在windows系統(tǒng)下校正瀏覽器縮放比例 // 初始化頁面校正瀏覽器縮放比例 t._correct(); // 開啟監(jiān)聽頁面縮放 t._watch(); } } } export default DevicePixelRatio;
全局導(dǎo)入App.vue
<script> import DevicePixelRatio from './util/devicePixelRatio' export default { name: 'App', data() { return { } }, created() { new DevicePixelRatio().init() } } </script>
刷新頁面
不管怎么縮放,125%還是150%,頁面都不會去縮放了,就不會出現(xiàn)錯(cuò)亂的問題了
到此這篇關(guān)于vue項(xiàng)目屏幕分辨率與屏幕的縮放適配-教程的文章就介紹到這了,更多相關(guān)vue 屏幕分辨率內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue.config.js配置報(bào)錯(cuò)解決辦法(可能是與webpack混淆)
在Vue.js開發(fā)過程中,vue.config.js文件是用于配置項(xiàng)目的,特別是對于開發(fā)環(huán)境的設(shè)置,這篇文章主要給大家介紹了關(guān)于vue.config.js配置報(bào)錯(cuò)解決的相關(guān)資料,可能是與webpack混淆,需要的朋友可以參考下2024-06-06vue3中使用vuex和vue-router的詳細(xì)步驟
這篇文章主要介紹了vue3中使用vuex和vue-router的步驟,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12vue登錄頁面回車執(zhí)行事件@keyup.enter.native問題
這篇文章主要介紹了vue登錄頁面回車執(zhí)行事件@keyup.enter.native問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03組件中多個(gè)el-upload存在導(dǎo)致上傳圖片失效的問題及解決
這篇文章主要介紹了組件中多個(gè)el-upload存在導(dǎo)致上傳圖片失效的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03