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:
+1
-1
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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; }
|
||||||
|
|||||||
@@ -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()));
|
||||||
|
|||||||
Reference in New Issue
Block a user