f439179641
Added a JavaScript file that detects browser scaling and prompts users when scale is not 100%
109 lines
3.5 KiB
JavaScript
109 lines
3.5 KiB
JavaScript
(function() {
|
|
var ignore = localStorage.getItem("bad-scale-ignore-it") == "ignore-it";
|
|
|
|
function getScale() {
|
|
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;
|
|
}
|
|
|
|
return ratio == 0 ? 0 : Math.round(ratio * 100);
|
|
}
|
|
|
|
var showing = false;
|
|
|
|
var div = document.createElement("div");
|
|
div.style.position = "fixed";
|
|
div.style.top = "0px";
|
|
div.style.left = "0px";
|
|
div.style.width = "100vw";
|
|
div.style.backgroundColor = "firebrick";
|
|
div.style.textAlign = "center";
|
|
div.style.zIndex = 99;
|
|
|
|
var b = document.createElement("b");
|
|
b.innerHTML = 'Bad Scale: ??% ';
|
|
|
|
div.appendChild(b);
|
|
|
|
var note1 = document.createElement("p");
|
|
note1.innerHTML = "Change your browser or your computer settings!";
|
|
note1.title = 'Just make sure "computer-scale" * "browser-scale" = 100% ,\n' +
|
|
"you can keep your computer-scale and only change this page's scale,\n" +
|
|
"for example: your computer-scale is 125%, just use [\"CTRL\"+\"-\"] to make your browser-scale of this page to 80%.";
|
|
div.appendChild(note1);
|
|
|
|
var note2 = document.createElement("p");
|
|
note2.innerHTML = " Otherwise, it will cause this page to not function properly!";
|
|
note2.title = "When you click \"Copy image to: [inpaint sketch]\" in some img2img's tab,\n" +
|
|
"if scale<100% the canvas will be invisible,\n" +
|
|
"else if scale>100% this page will take large amount of memory and CPU performance.";
|
|
div.appendChild(note2);
|
|
|
|
var btn = document.createElement("button");
|
|
btn.innerHTML = "Click here to ignore";
|
|
|
|
div.appendChild(btn);
|
|
|
|
function tryShowTopBar(scale) {
|
|
if (showing) return;
|
|
|
|
b.innerHTML = 'Bad Scale: ' + scale + '% ';
|
|
|
|
var updateScaleTimer = setInterval(function() {
|
|
var newScale = getScale();
|
|
b.innerHTML = 'Bad Scale: ' + newScale + '% ';
|
|
if (newScale == 100) {
|
|
var p = div.parentNode;
|
|
if (p != null) p.removeChild(div);
|
|
showing = false;
|
|
clearInterval(updateScaleTimer);
|
|
check();
|
|
}
|
|
}, 999);
|
|
|
|
btn.onclick = function() {
|
|
clearInterval(updateScaleTimer);
|
|
var p = div.parentNode;
|
|
if (p != null) p.removeChild(div);
|
|
ignore = true;
|
|
showing = false;
|
|
localStorage.setItem("bad-scale-ignore-it", "ignore-it");
|
|
};
|
|
|
|
document.body.appendChild(div);
|
|
}
|
|
|
|
function check() {
|
|
if (!ignore) {
|
|
var timer = setInterval(function() {
|
|
var scale = getScale();
|
|
if (scale != 100 && !ignore) {
|
|
tryShowTopBar(scale);
|
|
clearInterval(timer);
|
|
}
|
|
if (ignore) {
|
|
clearInterval(timer);
|
|
}
|
|
}, 999);
|
|
}
|
|
}
|
|
|
|
if (document.readyState != "complete") {
|
|
document.onreadystatechange = function() {
|
|
if (document.readyState != "complete") check();
|
|
};
|
|
} else {
|
|
check();
|
|
}
|
|
})();
|