Block pinch and double-tap zoom, including on iOS Safari
iOS Safari ignores user-scalable=no, so zoom is blocked in three layers: - viewport meta: maximum-scale=1, user-scalable=no on every page (covers Android, home-screen apps and iOS focus zoom on inputs) - CSS: touch-action: pan-x pan-y on html, so scrolling still works but pinch and double-tap zoom do not - JS (fluid.js): cancel Safari's gesture* events and two-finger touchmove Double-tap is left to CSS rather than JS so rapid repeated taps on buttons still register as clicks. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
7941406163
commit
ed5617a47a
8 files changed
+25
-7
No files matched your search
+1
-1
@@ -2,7 +2,7 @@
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f2f2f7">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f2f2f7">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
|
||||
@@ -524,6 +524,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 拡大させない ----------
|
||||
// iOS Safari は viewport の user-scalable=no を無視するので、ピンチは gesture* イベントと
|
||||
// 2本指の touchmove を止めて防ぐ。ダブルタップの拡大は CSS の touch-action で止めている
|
||||
// (JS で 2回目のタップを止めると、素早い連打のクリックまで消えてしまうため)
|
||||
const stopZoom = (e) => e.preventDefault();
|
||||
for (const type of ['gesturestart', 'gesturechange', 'gestureend']) {
|
||||
document.addEventListener(type, stopZoom, { passive: false });
|
||||
}
|
||||
document.addEventListener(
|
||||
'touchmove',
|
||||
(e) => {
|
||||
if (e.touches.length > 1) e.preventDefault();
|
||||
},
|
||||
{ passive: false },
|
||||
);
|
||||
|
||||
window.Fluid = {
|
||||
Spring,
|
||||
VelocityTracker,
|
||||
|
||||
@@ -173,6 +173,8 @@ html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
background: var(--bg);
|
||||
/* スクロールだけ許し、ピンチとダブルタップの拡大は止める(子の touch-action もこれに絞られる) */
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -1462,7 +1464,7 @@ body.page-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--room);
|
||||
touch-action: manipulation; /* ダブルタップでの拡大を防ぐ(ピンチ拡大は残す) */
|
||||
touch-action: pan-x pan-y; /* ダブルタップ・ピンチでの拡大を防ぐ */
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f2f2f7">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f2f2f7">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f2f2f7">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#eceef1">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#070c0a">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
|
||||
Reference in new issue
Block a user