//APP.VUE 页面
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
mounted() {
//这里1920是根据开发时的电脑分辨率确定,视情况而定
(function(targetWidth = 1920) {
const isFox =
navigator.userAgent.indexOf("Firefox") > -1 ||
window.navigator.userAgent.indexOf("Trident") > 0
? true
: false;
const style = document.createElement("style");
style.innerHTML = `
html {
width:${targetWidth + "px"};
${isFox ? `transform-origin: top left;` : ""}
}
body {
width: 100%;
height: 100%;
margin: 0;
}
`;
document.head.appendChild(style);
let adjustWindow = () => {
const ratio = window.innerWidth / targetWidth;
const htmlHeight =
(window.innerHeight * targetWidth) / window.innerWidth + "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);
};
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;
};
}
})();
}
};
</script>
不适合有私有样式的结构部分,例如富文本回显的html结构。