iOS Safariでボタン連打時に拡大される問題の対処法
なぜ拡大されるのか？
iOS Safariには「ダブルタップで拡大（Smart Zoom）」という仕様があるんだ。
ボタンを連続で押すと、この仕様に引っかかって勝手に拡大されてしまう。
え、それってユーザーからしたらただの連打なのに！？
そう、その通り。だから開発者側で制御してやらないと、UIが壊れて見えるんだよ。
まずはCSSで抑止するのが一番シンプルだ！
対策1: CSSでダブルタップ拡大を抑止
iOS 13.4以降なら touch-action: manipulation; を指定するだけでOK。
これでピンチズームは残しつつ、ダブルタップ拡大を防げる。
おお、CSS一行で済むなら手軽だね！
/* 連打される要素に指定 */
button, a[role="button"], .btn {
touch-action: manipulation;
}
Tailwindならこんな感じ。
<button class="touch-manipulation">保存</button> って書けばOK。 [/gorilla> 対策2: 入力フォーカス時の拡大を防ぐ iOSはフォントサイズが16px未満の入力要素をタップすると自動で拡大する。 だからフォーム要素は必ず16px以上に設定しよう。 [reader] あー、よくフォームで変に拡大されるのってそれか！ [/reader] input, select, textarea, button { font-size: 16px; } 対策3: ビューポートの基本設定 メタタグで基本的なviewportを指定しておくと、挙動が安定する。 [gorilla] <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> を入れておこう。
対策4: ズーム自体を禁止する（最終手段）
どうしても解決しない場合は、ズーム自体を禁止できる。
ただしアクセシビリティ的に推奨はできない方法。
拡大が必要な人もいるし、これは最後の手段だね。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
対策5: 古いiOS向けフォールバック
古いSafariでCSSが効かない場合は、JSでダブルタップを検知して自前で制御する。
対象範囲は絞らないと副作用が大きいぞ。
(function () {
let last = 0;
const container = document.body;
container.addEventListener('touchend', function (e) {
const now = Date.now();
if (now - last < 350) {
const btn = e.target.closest('button, [role="button"], a');
if (btn) btn.click();
e.preventDefault();
}
last = now;
}, { passive: false });
})();
まとめ
まずは touch-action: manipulation; を試すのがベスト。
次にフォントサイズやviewport設定を確認して、それでもダメならJSフォールバック。
ズーム禁止は最後の手段として考えよう。
チェックリスト！ touch-action → フォントサイズ16px以上 → viewport設定 → JSフォールバック → 最後にズーム禁止！
コメント