manawenuz/wz-phone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): disable WebView pinch-zoom and desktop right-click menu
Some checks failed
Mirror to GitHub / mirror (push) Failing after 38s
Details
Build Release Binaries / build-amd64 (push) Has been cancelled
Details

Browse Source 
Two small WebView hardening tweaks that apply to both Android (Tauri
mobile) and desktop (Tauri) since the frontend is shared:

- index.html viewport meta now sets maximum-scale=1.0, minimum-scale=1.0,
  and user-scalable=no. This stops users on Android from pinch-zooming
  out of the fixed-layout UI. Desktop is unaffected because the Tauri
  WebView ignores pinch gestures anyway.
- main.ts installs global listeners that preventDefault on contextmenu
  (kills the browser-style right-click menu that exposed Inspect /
  Reload / Back / Forward entries on desktop), keydown Ctrl+-/+/0
  (stops keyboard zoom of the fixed layout), and gesture* + ctrl-wheel
  events (trackpad pinch on WebKit + Chromium respectively).

Dev tools remain accessible via F12 / Cmd-Opt-I keyboard shortcuts —
only the right-click entry point is suppressed. Android has no
right-click so that part is a no-op there.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Siavash Sameni
2026-04-10 15:26:08 +04:00
parent a5c00fe5cb
commit 5cd7a20152
2 changed files with 39 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
desktop/index.html
View File

@@ -2,7 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<title>WarzonePhone</title>
<link rel="stylesheet" href="/src/style.css" />
</head>

35
desktop/src/main.ts
View File

@@ -2,6 +2,41 @@ import { invoke } from "@tauri-apps/api/core";
import { listen } from "@tauri-apps/api/event";
import { generateIdenticon, createIdenticonEl } from "./identicon";
// ── WebView hardening ──
// Suppress the browser-style right-click context menu on desktop Tauri — it
// exposes Inspect/Reload/Back/Forward entries that don't belong in a native-
// feeling VoIP app. Dev tools remain accessible via the usual keyboard
// shortcuts (F12 / Cmd-Opt-I). On Android there is no right-click so this is
// a no-op there.
document.addEventListener("contextmenu", (e) => e.preventDefault());
// Also suppress browser-level zoom via keyboard (Ctrl/Cmd + / - / 0) so the
// fixed-layout UI can't be accidentally scaled. Pinch-zoom is already handled
// at the viewport meta level in index.html.
document.addEventListener(
"keydown",
(e) => {
if ((e.ctrlKey || e.metaKey) && (e.key === "+" || e.key === "-" || e.key === "=" || e.key === "0")) {
e.preventDefault();
}
},
{ capture: true },
);
// Block gesture-based zoom on browsers that fire these legacy events (mainly
// Safari / WebKit). Chromium sends `wheel` with ctrlKey for trackpad pinch —
// catch that too.
document.addEventListener("gesturestart", (e) => e.preventDefault());
document.addEventListener("gesturechange", (e) => e.preventDefault());
document.addEventListener("gestureend", (e) => e.preventDefault());
document.addEventListener(
"wheel",
(e) => {
if (e.ctrlKey) e.preventDefault();
},
{ passive: false },
);
// ── Elements ──
const connectScreen = document.getElementById("connect-screen")!;
const callScreen = document.getElementById("call-screen")!;