feat: 阻止移动端缩放

This commit is contained in:
ChenZhaoYu 2023-02-15 14:43:23 +08:00
parent d9761ed0e5
commit c09a4f6c75
1 changed files with 65 additions and 60 deletions

View File

@ -1,71 +1,76 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-cmn-Hans"> <html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatGPT Web</title>
</head>
<body>
<div id="app">
<style>
.loading-wrap {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.balls { <head>
width: 4em; <meta charset="UTF-8">
display: flex; <link rel="icon" type="image/svg+xml" href="/favicon.svg">
flex-flow: row nowrap; <meta name="viewport"
align-items: center; content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
justify-content: space-between; <title>ChatGPT Web</title>
} </head>
.balls div { <body>
width: 0.8em; <div id="app">
height: 0.8em; <style>
border-radius: 50%; .loading-wrap {
background-color: #4b9e5f; display: flex;
} justify-content: center;
align-items: center;
height: 100vh;
}
.balls div:nth-of-type(1) { .balls {
transform: translateX(-100%); width: 4em;
animation: left-swing 0.5s ease-in alternate infinite; display: flex;
} flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
}
.balls div:nth-of-type(3) { .balls div {
transform: translateX(-95%); width: 0.8em;
animation: right-swing 0.5s ease-out alternate infinite; height: 0.8em;
} border-radius: 50%;
background-color: #4b9e5f;
}
@keyframes left-swing { .balls div:nth-of-type(1) {
50%, transform: translateX(-100%);
100% { animation: left-swing 0.5s ease-in alternate infinite;
transform: translateX(95%); }
}
}
@keyframes right-swing { .balls div:nth-of-type(3) {
50% { transform: translateX(-95%);
transform: translateX(-95%); animation: right-swing 0.5s ease-out alternate infinite;
} }
100% { @keyframes left-swing {
transform: translateX(100%);
} 50%,
} 100% {
</style> transform: translateX(95%);
<div class="loading-wrap"> }
<div class="balls"> }
<div></div>
<div></div> @keyframes right-swing {
<div></div> 50% {
</div> transform: translateX(-95%);
</div> }
100% {
transform: translateX(100%);
}
}
</style>
<div class="loading-wrap">
<div class="balls">
<div></div>
<div></div>
<div></div>
</div>
</div> </div>
<script type="module" src="/src/main.ts"></script> </div>
</body> <script type="module" src="/src/main.ts"></script>
</body>
</html> </html>