（一）原文：https://blog.csdn.net/JackieDYH/article/details/127628587
筆記本或者顯示器?默認設置125%或者150%縮放寝优，導致布局錯亂的解決方法,現在很多14寸的筆記本，出廠默認就是150%的顯示。導致很多時候我們的項目遥赚，自己開發(fā)的時候都是按照100%比例來開發(fā)的抠刺，上線了就會發(fā)現這個問題
vue項目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;
? ? // }
? ? // 現只針對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（設備像素比例）變化后忆谓，計算頁面body標簽zoom修改其大小裆装，來抵消devicePixelRatio帶來的變化。
? ? document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;
? }
? // 監(jiān)聽頁面縮放
? _watch() {
? ? let t = this;
? ? t._addHandler(window, 'resize', function() { // 注意這個方法是解決全局有兩個window.resize
? ? ? // 重新校正
? ? ? t._correct()
? ? })
? }
? // 初始化頁面比例
? init() {
? ? let t = this;
? ? if (t._getSystem()) { // 判斷設備倡缠，目前只在windows系統(tǒng)下校正瀏覽器縮放比例
? ? ? // 初始化頁面校正瀏覽器縮放比例
? ? ? t._correct();
? ? ? // 開啟監(jiān)聽頁面縮放
? ? ? t._watch();
? ? }
? }
}
export default DevicePixelRatio;
全局導入 在App.vue
<script>
import DevicePixelRatio from './util/devicePixelRatio'
export default {
? name: 'App',
? data() {
? ? return {
? ? }
? },
? created() {
? ? new DevicePixelRatio().init()
? }
}
</script>
刷新頁面
不管怎么縮放哨免，125%還是150%，頁面都不會去縮放了昙沦，就不會出現錯亂的問題了
（二）原文地址：https://blog.csdn.net/chriscencen/article/details/127683217
前端解決web端 125%琢唾，150%縮放，1366*768分辨率兼容問題
最近做一個需求是在web項目中打開一個新的標簽頁盾饮，新的標簽頁是要適應大屏的采桃，但是同時要適應125%懒熙，150%縮放，1366*768分辨率兼容普办。所以單獨對這個頁面進行了兼容處理
mounted () {
? ? window.addEventListener('resize', this.recalc, false);
? ? this.recalc();
? },
methods: {
? ? recalc () {
? ? ? // 解決 125%煌珊，150%縮放，1366*768分辨率兼容問題
? ? ? // domEl為需要縮放的頁面的根元素
? ? ? const domEl = this.$refs.workingRef;
? ? ? if (!domEl) return;
? ? ? const { clientWidth, clientHeight } = document.documentElement || document.body || {};
? ? ? const scaleX = clientWidth / 1920;? ? // 分母是設計稿的寬度
? ? ? const scaleY = clientHeight / 1080;? // 分母是設計稿的高度
? ? ? domEl.style.transform = `scale(${scaleX})`;
? ? ? domEl.style.transformOrigin = "top left";
? ? ? // 按照寬度的比例縮放后底部會出現空白泌豆，再用marginBottom解決這個空白問題
? ? ? domEl.style.marginBottom = (scaleY - scaleX) * 1080 + 'px';?
? ? },
}
beforeDestroy () {
? ? window.removeEventListener('resize', this.recalc);
? },
<style lang="scss" scoped>
.working {
? width: 1920px;
? height: 1080px;
}
</style>
