fix: 移动端播放按钮点按后粘连放大的问题

.btn-play:hover 的 scale(1.05) 在触屏上点按后 :hover 粘住不解除,
改为仅 (hover: hover) and (pointer: fine) 设备生效。

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
selfrelease
2026-10-05 15:59:14 +08:00
co-authored by Devin
parent 6329f3f6b4
commit bffe5cfced
3 changed files with 6 additions and 3 deletions
+1 -1
View File
@@ -19,7 +19,7 @@
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="经典诵读"> <meta name="apple-mobile-web-app-title" content="经典诵读">
<link rel="stylesheet" href="style.css?v=17"> <link rel="stylesheet" href="style.css?v=18">
</head> </head>
<body> <body>
+3
View File
@@ -151,7 +151,10 @@ body {
box-shadow: 0 6px 16px rgba(158, 43, 37, 0.35); box-shadow: 0 6px 16px rgba(158, 43, 37, 0.35);
transition: transform 0.15s ease, box-shadow 0.15s ease; transition: transform 0.15s ease, box-shadow 0.15s ease;
} }
/* hover 仅在支持悬停的设备(鼠标)生效——手机点按后 :hover 会粘住,导致按钮保持放大 */
@media (hover: hover) and (pointer: fine) {
.btn-play:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(158, 43, 37, 0.45); } .btn-play:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(158, 43, 37, 0.45); }
}
.btn-play:active { transform: scale(0.97); } .btn-play:active { transform: scale(0.97); }
.btn-play:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } .btn-play:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn-play .icon { width: 24px; height: 24px; fill: currentColor; } .btn-play .icon { width: 24px; height: 24px; fill: currentColor; }
+1 -1
View File
@@ -4,7 +4,7 @@
* - /api/tts 不拦截,直接透传网络 * - /api/tts 不拦截,直接透传网络
*/ */
const CACHE = "fj-shell-v1"; const CACHE = "fj-shell-v1";
const SHELL = ["/", "/index.html", "/style.css?v=17", "/app.js?v=15", "/icon.svg", "/icon-180.png", "/icon-192.png", "/icon-512.png", "/manifest.json"]; const SHELL = ["/", "/index.html", "/style.css?v=18", "/app.js?v=15", "/icon.svg", "/icon-180.png", "/icon-192.png", "/icon-512.png", "/manifest.json"];
self.addEventListener("install", (e) => { self.addEventListener("install", (e) => {
e.waitUntil(caches.open(CACHE).then((c) => c.addAll(SHELL)).then(() => self.skipWaiting())); e.waitUntil(caches.open(CACHE).then((c) => c.addAll(SHELL)).then(() => self.skipWaiting()));