josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iPhone/iPad: no page zoom; PCs keep browser zoom

Browse Source 
Stray pinches and double-taps kept zooming the installed app. On iOS only the
viewport gets maximum-scale=1/user-scalable=no, Safari's gesture events are
cancelled and the page uses touch-action: manipulation. The player's own pinch
zoom (pointer events) still works.
This commit is contained in:
Jonathan Sykes
2026-10-03 02:07:41 +08:00
parent 9ce9a96f38
commit 2dfce8a2fb
2 changed files with 17 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/app.js
View File

@@ -1,3 +1,17 @@
// iPhone / iPad only: no page zoom (stray pinches and double-taps kept zooming
// the installed app awkwardly). PCs keep normal browser zoom. The player's own
// pinch-to-zoom uses pointer events and is unaffected.
(() => {
const ios = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
if (!ios) return;
document.documentElement.classList.add('ios-nozoom');
const vp = document.querySelector('meta[name="viewport"]');
if (vp) vp.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover');
for (const t of ['gesturestart', 'gesturechange', 'gestureend']) {
document.addEventListener(t, (e) => e.preventDefault(), { passive: false });
}
})();
/* ============================================================================ /* ============================================================================
* YT Player — frontend logic * YT Player — frontend logic
* Talks to the native (Zig) side over the zero-native bridge: window.zero.invoke * Talks to the native (Zig) side over the zero-native bridge: window.zero.invoke

3
frontend/styles.css
View File

@@ -4303,3 +4303,6 @@ body.landscape-fs .player-stage { touch-action: none; } /* fullscreen (real or t
/* The search box gives up width for the update icon instead of pushing Search off screen */ /* The search box gives up width for the update icon instead of pushing Search off screen */
.search-form { min-width: 0; } .search-form { min-width: 0; }
.search-form #searchInput { flex: 1 1 auto; min-width: 0; } .search-form #searchInput { flex: 1 1 auto; min-width: 0; }
/* iPhone/iPad: no double-tap page zoom (scrolling unaffected) */
html.ios-nozoom, html.ios-nozoom body { touch-action: manipulation; }