Mobile audit fixes: iOS input auto-zoom + tap delay
Audited on iPhone SE (320px), iPhone 13, Pixel 5 emulations: - FOUND: login/search inputs at 13.3px (< 16px) -> iOS Safari auto-zooms the page on focus. Fixed: 16px in style.css AND login.html (separate page with own CSS). - FOUND: no touch-action anywhere -> double-tap-zoom tap delay on buttons. Fixed: touch-action: manipulation on interactive elements in both stylesheets. - FOUND: .pl-spin missing from prefers-reduced-motion. Added. - VERIFIED CLEAN: no horizontal overflow at 320/390/393px, controls row fits, chip+gauge in viewport, episode grid 66x31 ok, Tap-to-play gesture flow works on BOTH hls.js and native paths (simulated iOS autoplay block), toast fits, zero JS errors, desktop playback regression OK, 18/18 API tests. assets v=7; login.html is no-store so updates without a bump.
This commit is contained in:
1 parent
9b90be3a10
commit
8f6d4dcf77
3 files changed
+11
-5
No files matched your search
+2
-2
@@ -6,7 +6,7 @@
|
|||||||
<title>ani-web</title>
|
<title>ani-web</title>
|
||||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23f97316'/%3E%3Ctext x='32' y='45' font-family='sans-serif' font-size='42' font-weight='700' text-anchor='middle' fill='%230e0f13'%3Ea%3C/text%3E%3C/svg%3E">
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23f97316'/%3E%3Ctext x='32' y='45' font-family='sans-serif' font-size='42' font-weight='700' text-anchor='middle' fill='%230e0f13'%3Ea%3C/text%3E%3C/svg%3E">
|
||||||
|
|
||||||
<link rel="stylesheet" href="style.css?v=6">
|
<link rel="stylesheet" href="style.css?v=7">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@@ -30,6 +30,6 @@
|
|||||||
max-age=300 in browser AND possibly in your HTTPS proxy, and a stale
|
max-age=300 in browser AND possibly in your HTTPS proxy, and a stale
|
||||||
copy is exactly how users keep seeing an old UI after a deploy -->
|
copy is exactly how users keep seeing an old UI after a deploy -->
|
||||||
<script src="hls.min.js"></script>
|
<script src="hls.min.js"></script>
|
||||||
<script src="app.js?v=6"></script>
|
<script src="app.js?v=7"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
+4
-2
@@ -12,9 +12,11 @@ form { background:var(--card); border:1px solid var(--bd); border-radius:10px;
|
|||||||
padding:2rem; width:280px; }
|
padding:2rem; width:280px; }
|
||||||
h1 { font-size:1.1rem; margin:0 0 1rem; color:var(--acc); }
|
h1 { font-size:1.1rem; margin:0 0 1rem; color:var(--acc); }
|
||||||
input { width:100%; box-sizing:border-box; padding:.55rem .8rem; border-radius:8px;
|
input { width:100%; box-sizing:border-box; padding:.55rem .8rem; border-radius:8px;
|
||||||
border:1px solid var(--bd); background:var(--bg); color:var(--fg); margin-bottom:.6rem; }
|
border:1px solid var(--bd); background:var(--bg); color:var(--fg); margin-bottom:.6rem;
|
||||||
|
font-size:16px; } /* >=16px stops iOS Safari auto-zoom on focus */
|
||||||
button { width:100%; margin-top:.4rem; padding:.55rem; border:0; border-radius:8px;
|
button { width:100%; margin-top:.4rem; padding:.55rem; border:0; border-radius:8px;
|
||||||
background:var(--acc); color:#000; font-weight:600; cursor:pointer; }
|
background:var(--acc); color:#000; font-weight:600; cursor:pointer;
|
||||||
|
touch-action:manipulation; }
|
||||||
.err { color:#f87171; font-size:.85rem; margin:.6rem 0 0; min-height:1.2em; }
|
.err { color:#f87171; font-size:.85rem; margin:.6rem 0 0; min-height:1.2em; }
|
||||||
.banner { position:fixed; top:1rem; left:50%; transform:translateX(-50%); background:var(--card);
|
.banner { position:fixed; top:1rem; left:50%; transform:translateX(-50%); background:var(--card);
|
||||||
border:1px solid var(--bd); border-radius:8px; padding:.4rem .9rem; color:var(--muted);
|
border:1px solid var(--bd); border-radius:8px; padding:.4rem .9rem; color:var(--muted);
|
||||||
|
|||||||
+5
-1
@@ -1,6 +1,10 @@
|
|||||||
:root { --bg: #0e0f13; --card: #171821; --bd: #262833; --fg: #e8e9f0; --muted: #8a8d9c; --acc: #f97316; }
|
:root { --bg: #0e0f13; --card: #171821; --bd: #262833; --fg: #e8e9f0; --muted: #8a8d9c; --acc: #f97316; }
|
||||||
* { box-sizing: border-box; }
|
* { box-sizing: border-box; }
|
||||||
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, sans-serif; }
|
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, sans-serif; }
|
||||||
|
/* mobile: >=16px input font stops iOS Safari auto-zoom on focus;
|
||||||
|
touch-action kills the double-tap-zoom tap delay on buttons */
|
||||||
|
input, select, textarea { font-size: 16px; }
|
||||||
|
button, a, .ep, .toast, .recent button { touch-action: manipulation; }
|
||||||
a { color: inherit; text-decoration: none; }
|
a { color: inherit; text-decoration: none; }
|
||||||
header { display: flex; gap: 1rem; align-items: center; padding: 0.8rem 1.2rem;
|
header { display: flex; gap: 1rem; align-items: center; padding: 0.8rem 1.2rem;
|
||||||
border-bottom: 1px solid var(--bd); position: sticky; top: 0; background: var(--bg); z-index: 5; }
|
border-bottom: 1px solid var(--bd); position: sticky; top: 0; background: var(--bg); z-index: 5; }
|
||||||
@@ -95,7 +99,7 @@ h2 { margin: 0.4rem 0; }
|
|||||||
.detail-prog { margin-top: .1rem; font-size: .85rem; }
|
.detail-prog { margin-top: .1rem; font-size: .85rem; }
|
||||||
.mini-info { display: flex; flex-direction: column; padding: .5rem; }
|
.mini-info { display: flex; flex-direction: column; padding: .5rem; }
|
||||||
.mini-meta { font-size: .75rem; color: var(--muted); margin-top: .1rem; }
|
.mini-meta { font-size: .75rem; color: var(--muted); margin-top: .1rem; }
|
||||||
@media (prefers-reduced-motion: reduce) { .skel, .toast { animation: none; } }
|
@media (prefers-reduced-motion: reduce) { .skel, .toast, .pl-spin { animation: none; } }
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
.hero-sec { grid-template-columns: 100px 1fr; grid-template-areas: "img right"; gap: .8rem; padding: .8rem; }
|
.hero-sec { grid-template-columns: 100px 1fr; grid-template-areas: "img right"; gap: .8rem; padding: .8rem; }
|
||||||
|
|||||||
Reference in new issue
Block a user