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:
jozamudi committed 2026-08-31 19:40:07 +00:00
1 parent 9b90be3a10
commit 8f6d4dcf77
3 files changed
+11 -5

No files matched your search

+2 -2
View File
@@ -6,7 +6,7 @@
<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="stylesheet" href="style.css?v=6">
<link rel="stylesheet" href="style.css?v=7">
</head>
<body>
<header>
@@ -30,6 +30,6 @@
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 -->
<script src="hls.min.js"></script>
<script src="app.js?v=6"></script>
<script src="app.js?v=7"></script>
</body>
</html>