69 lines
2.7 KiB
JavaScript
69 lines
2.7 KiB
JavaScript
|
var ratio = 0;
|
|||
|
|
var screen = window.screen;
|
|||
|
|
var ua = navigator.userAgent.toLowerCase();
|
|||
|
|
var flag = true;
|
|||
|
|
function getRatio() {
|
|||
|
|
if (window.devicePixelRatio !== undefined) {
|
|||
|
|
ratio = window.devicePixelRatio;
|
|||
|
|
} else if (~ua.indexOf("msie")) {
|
|||
|
|
if (screen.deviceXDPI && screen.logicalXDPI) {
|
|||
|
|
//IE
|
|||
|
|
ratio = screen.deviceXDPI / screen.logicalXDPI;
|
|||
|
|
}
|
|||
|
|
} else if (
|
|||
|
|
window.outerWidth !== undefined &&
|
|||
|
|
window.innerWidth !== undefined
|
|||
|
|
) {
|
|||
|
|
ratio = window.outerWidth / window.innerWidth;
|
|||
|
|
}
|
|||
|
|
if (ratio == 1) {
|
|||
|
|
$(".ratio-suggest").remove();
|
|||
|
|
} else if (ratio > 1) {
|
|||
|
|
appendDom("放大", detectZoom());
|
|||
|
|
} else {
|
|||
|
|
appendDom("缩小", detectZoom());
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
getRatio();
|
|||
|
|
function detectZoom() {
|
|||
|
|
var ratio = 0,
|
|||
|
|
screen = window.screen,
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
return ratio;
|
|||
|
|
}
|
|||
|
|
function appendDom(txt, num) {
|
|||
|
|
if (flag) {
|
|||
|
|
$(".ratio-suggest").remove();
|
|||
|
|
$("body").append(`
|
|||
|
|
<div class="ratio-suggest" style="position: fixed;top: 20%;right: 20px;z-index: 999;background-color: #ebf5fd;width: 340px;padding: 10px;padding-right: 30px; border-left: 4px solid #004f94;">
|
|||
|
|
<span style="color: #000;font-size: 12px;line-height: 1.8;">您的浏览器目前处于<strong style="font-weight:bold;font-size:14px;color:#004f94">${txt}</strong>状态，页面可能会出现错位现象，建议100%大小显示。当前页面缩放比例<strong style="font-weight:bold;font-size:14px;color:#004f94">${num}%</strong></span>
|
|||
|
|
<div class="close" style="position: absolute;top: 10px;right: 10px; width: 14px;height: 14px;cursor: pointer;">
|
|||
|
|
<svg t="1536830466687" class="icon leftPop-close" viewBox="0 0 1024 1024" version="1.1"><title>不再显示</title><path d="M512 438.378667L806.506667 143.893333a52.032 52.032 0 1 1 73.6 73.621334L585.621333 512l294.485334 294.485333a52.074667 52.074667 0 0 1-73.6 73.642667L512 585.621333 217.514667 880.128a52.053333 52.053333 0 1 1-73.621334-73.642667L438.378667 512 143.893333 217.514667a52.053333 52.053333 0 1 1 73.621334-73.621334L512 438.378667z" fill="" p-id="15859"></path></svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
window.onresize = function () {
|
|||
|
|
getRatio();
|
|||
|
|
};
|
|||
|
|
$(".ratio-suggest").on("click", ".close", function () {
|
|||
|
|
$(".ratio-suggest").remove();
|
|||
|
|
flag = false;
|
|||
|
|
});
|
|||
|
|
|