Optimize the display effect at low resolution

This commit is contained in:
zyronon
2023-11-08 23:45:42 +08:00
parent 30a4c49009
commit 6e82384b1e
25 changed files with 156 additions and 104 deletions

View File

@@ -1,52 +1,50 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/logo.jpg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Typing Word</title>
<script>
+(function () {
function rem() {
let html = document.documentElement;
let max = parseInt('1920rem');
let min = parseInt('1000rem');
let width;
if (window.innerWidth > max) {
width = max;
} else if (window.innerWidth < min) {
width = min;
} else {
width = window.innerWidth;
}
html.style.fontSize = width / max + 'px';
}
rem();
window.addEventListener('resize', rem);
})();
</script>
<script>
</script>
<script>
var _hmt = _hmt || [];
if (location.href.includes('netlify.app')) {
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?d77525f1ad23698a2f34f54ff69c7750";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/logo.jpg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Typing Word</title>
<script>
+(function () {
function rem() {
let html = document.documentElement;
let max = parseInt('2048rem');
let min = parseInt('2048rem');
let width;
if (window.innerWidth < min) {
width = min;
} else {
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?0859df6553bae18ce901cca87d937ca7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
width = window.innerWidth;
}
</script>
console.log('width', width)
html.style.fontSize = width / max + 'px';
}
rem();
window.addEventListener('resize', rem);
})();
</script>
<script>
</script>
<script>
var _hmt = _hmt || [];
if (location.href.includes('netlify.app')) {
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?d77525f1ad23698a2f34f54ff69c7750";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
} else {
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?0859df6553bae18ce901cca87d937ca7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
}
</script>
</head>
<body>
<div id="app"></div>