// window.addEventListener('resize', this.recalc, false);
// this.recalc();
// if (window.screen.width <= '1370') {
// document.write('<body style="zoom: 75%">');
// }
recalc () {
// 解决 125%，150%缩放，1366*768分辨率兼容问题
// domEl为需要缩放的页面的根元素
const domEl = this.$refs.app;
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);
}
在updated()中进行修改
this.$refs.button.$el.style.height="40px"
项目里用了这个
export default {
name: "App",
metaInfo() {
return {
title:
this.$store.state.settings.dynamicTitle &&
this.$store.state.settings.title,
titleTemplate: (title) => {
return title
? `${title} - ${process.env.VUE_APP_TITLE}`
: process.env.VUE_APP_TITLE;
},
};
},
mounted() {
let width = screen.width;
if (this.getBrowser() == true && width < 1400 && width > 1080) {
this.autoAdjust();
document.body.style.zoom =
document.documentElement.clientHeight / 1080 / zoom;
}
},
methods: {
autoAdjust(targetWidth = 1920) {
const isFox = navigator.userAgent.indexOf("Firefox") > -1 ? true : false;
let adjustWindow = () => {
const ratio = document.documentElement.clientWidth / targetWidth;
const htmlHeight =
(document.documentElement.clientHeight * targetWidth) /
document.documentElement.clientWidth +
"px";
document.documentElement.style.height = htmlHeight;
if (isFox) {
document.documentElement.style.transform = `scale(${ratio})`;
} else {
document.documentElement.style.zoom = ratio;
}
document.documentElement.setAttribute("data-ratio", ratio);
let allTag = document.getElementsByTagName("*");
for (let i = 0; i < allTag.length; i++) {
const currentMarginTop = window.getComputedStyle(allTag[i]).marginTop;
// if (currentMarginTop !== '0px' || currentMarginTop !== 'auto') {
// allTag[i].style.marginTop = Number(currentMarginTop.slice(0, -2)) * (document.documentElement.clientHeight / 1080 / ratio) + 'px'
// }
// const paddingTop = window.getComputedStyle(allTag[i]).paddingTop
// if (paddingTop !== '0px' || paddingTop !== 'auto') {
// allTag[i].style.paddingTop = Number(paddingTop.slice(0, -2)) * (document.documentElement.clientHeight / 1080 / ratio) + 'px'
// }
}
};
adjustWindow();
window.addEventListener("resize", adjustWindow);
// 使鼠标坐标一致
let x_get = Object.getOwnPropertyDescriptor(
MouseEvent.prototype,
"x"
).get;
let y_get = Object.getOwnPropertyDescriptor(
MouseEvent.prototype,
"y"
).get;
Object.defineProperties(MouseEvent.prototype, {
R: {
get: function () {
return parseFloat(
document.documentElement.getAttribute("data-ratio")
);
},
},
x: {
get: function () {
return x_get.call(this) / this.R;
},
},
y: {
get: function () {
return y_get.call(this) / this.R;
},
},
});
if (isFox) {
let getBoundingClientRect = Element.prototype.getBoundingClientRect;
Element.prototype.getBoundingClientRect = function () {
let value = getBoundingClientRect.call(this);
let ratio = parseFloat(
document.documentElement.getAttribute("data-ratio")
);
value = new Proxy(value, {
get: function (target, proper) {
return Reflect.get(target, proper) / ratio;
},
});
return value;
};
}
},
getBrowser() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
// var isIE = window.ActiveXObject || "ActiveXObject" in window
var isIE =
userAgent.indexOf("compatible") > -1 &&
userAgent.indexOf("MSIE") > -1 &&
!isOpera;
var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
var isFireFox = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
var isSafari =
userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1;
//判断是否Safari浏览器
var isChrome =
userAgent.indexOf("Chrome") > -1 &&
userAgent.indexOf("Safari") > -1 &&
!isEdge;
//判断Chrome浏览器
var isQQBrowser = userAgent.indexOf("QQBrowser") > -1;
if (isChrome || isEdge) {
return true;
} else {
return false;
}
},
},
};
</script>
