export default {
data() {
return {
windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
windowHeight: document.documentElement.clientHeight, //实时屏幕高度
zoom: 1,
isIOS: false,
isPC: true,
};
},
watch: {
windowHeight(val) {
let that = this;
console.log("实时屏幕高度：", val, that.windowHeight);
},
windowWidth(val) {
let that = this;
console.log("实时屏幕宽度：", val, that.windowWidth);
},
zoom(val) {
let that = this;
console.log("实时缩放比例：", val, that.zoom);
if (that.isPC) {
window.document.body.style.zoom = 100 / that.zoom;
} else {
window.document.body.style.zoom = 1;
}
},
},
mounted() {
var that = this;
// <!--把window.onresize事件挂在到mounted函数上-->
that.browserRedirect();
that.zoom = that.detectZoom();
window.onresize = () => {
return (() => {
console.log("屏幕变化");
window.fullHeight = document.documentElement.clientHeight;
window.fullWidth = document.documentElement.clientWidth;
that.windowHeight = window.fullHeight; // 高
that.windowWidth = window.fullWidth; // 宽
that.browserRedirect();
that.zoom = that.detectZoom();
})();
};
var u = navigator.userAgent;
if (u.indexOf("miniProgram") != -1) {
console.log("小程序=》" + u);
} else {
console.log("网页=》" + u);
//在微信网页
}
},
methods: {
getIOSType() {
//跳转移动端页面
let ran = navigator.userAgent;
let isAndroid = ran.indexOf("Android") > -1 || ran.indexOf("Linux") > -1;
let isIOS = !!ran.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isAndroid) {
this.isIOS = false;
}
if (isIOS) {
this.isIOS = true;
}
},
browserRedirect() {
const that = this;
const sUserAgent = navigator.userAgent.toLowerCase();
if (
/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(
sUserAgent
)
) {
that.isPC = false;
this.getIOSType();
} else {
that.isPC = true;
}
},
// 方法
detectZoom() {
let ratio = 0;
const screen = window.screen;
const ua = navigator.userAgent.toLowerCase();
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
} else if (~ua.indexOf("msie")) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
} else if (
window.outerWidth !== undefined &&
window.innerWidth !== undefined
) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio) {
ratio = Math.round(ratio * 100);
}
console.log(ratio);
return ratio;
},
},
};
|
