iOSで文字入力・選択時の自動拡大（ズーム）表示を禁止する方法

カテゴリ：iOS対応

iOSではWebフォーム上のテキストエリアやセレクトボックスをフォーカスすると自動拡大される場合があります。
これはこれでユーザビリティを考慮した設計なのでしょうが、Webサイトの作り（特にWebアプリ）では画面全体が見渡せず、元に戻すためにいちいち画面をダブルタップして戻さなければならず、非常に使いづらい側面も場合もあります。

今回はこの自動拡大を無効化する方法を解説いたします。

なぜ自動拡大されるのか？

テキストエリアやセレクトボックスにフォーカスした際に自動拡大される理由はフォントサイズにあり、

フォントサイズが16pxを下回ると自動拡大される

のです。

自動拡大の禁止方法

そのため、自動拡大の禁止方法はフォントサイズを16pxに固定する事です。
具体的にはbody、input、textarea、selectの各要素に以下のCSSの設定を行います。

文字入力・選択時の自動拡大禁止：

<!-- 入力欄にフォーカスが当たっても拡大しない -->
<style>
body, input, textarea, select {
    font-size: 16px;
}
</style>

手動拡大の禁止方法

また、Webアプリなど、Webサイトのユーザビリティの観点から画面表示は常に固定にしたい場合もあるかと思います。
そういったユーザーによる拡大縮小を禁止したい場合は以下のJavaScriptコードをページに記述します。

ユーザーによる拡大縮小を禁止：

<!-- ピッチインピッチアウトによる拡大縮小を禁止 -->
<script>
document.documentElement.addEventListener('touchstart', function (e) {
    if (e.touches.length >= 2) {e.preventDefault();}
}, {passive: false});
</script>

<!-- ダブルタップによる拡大を禁止 -->
<script>
var t = 0;
document.documentElement.addEventListener('touchend', function (e) {
    var now = new Date().getTime();
    if ((now - t) < 350) {
        e.preventDefault();
    }
    t = now;
}, false);
</script>

注意ユーザーによる拡大を禁止するという事は、ユーザビリティを考慮したデザインになっていることが前提となります。設定を行う前にユーザーが拡大しなくてもいいようなデザインになっているかを確認しておきましょう。

公開日時：2020年03月22日 10:58:00