iPhone Safariで inputタグフォーカス時のズームインをさせない方法

iPhone safari で、テキストボックスなどのinputタグをタップしたりしてフォーカスすると、画面がinputエリアへズームインします。

タップ操作する際はこの動作でも問題ないのですが、外部ディスプレイに接続しているときなど、ズームインしてほしくないこともあるかと思います。

この記事では、フォーカス時にinputエリアへズームインしないようにする方法を紹介します。

自作ウェブページだけでなく、Googleなど他サイトでも使える方法も紹介します。

自作ページはmetaタグで対応
自作以外はshortcutアプリからmeta タグを挿入する
iOS ショートカットアプリは結構便利

自作ページはmetaタグで対応

自作ページでは、以下のmetaタグを挿入します。


<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">

maximum-scale=1.0 とすることで、フォーカス時のズームインを抑制しています。

iOS 15.2, iPhone SE2 で動作確認済みです（2022/5/2時点）

自作以外はshortcutアプリからmeta タグを挿入する

Googleなどの他サイトでは、自由にコーディングはできません。

しかし、JavaScriptを実行することで、metaタグを挿入することができます。

JavaScriptの実行はShortcutアプリから実装が可能です。

作ったショートカットのリンク

作成手順は後述していますが、この記事で作成したショートカットファイルのリンクを以下に公開しています。

ズームインさせない

注意点

JavaScriptの実行によりmetaタグを挿入することから、ページをリロードすると挿入前に戻ってしまいます。

そのため、ページをロードする度に、JavaScriptの実行が必要になります。

また、このショートカットは、Safariのみ有効です。

chromeなどその他のブラウザでは実行できませんのでご注意ください。

手順1：shortcutアプリを起動して、新規作成

shortcutアプリを開き、ショートカットを新規作成します。

名前は「ズームインさせない」にしました。

手順2：WebページでJavaScriptを実行

「WebページでJavaScriptを実行」アクションを追加します。

手順3：safariのWebページをショートカットの入力からにする

JavaScriptを実行するSafariのWebページは、ショートカットの入力にします。

手順4：共有シートに表示し、SafariのWebページのみ受け取る

「指定なし」と「任意」の部分を設定していきます。

まず、「指定なし」の部分を「共有シートに表示」に変更します。

次に、「任意」の部分を「SafariのWebページ」のみにします。

以下のようになればOKです。

手順5：実行するJavaScriptソースコードを記述する

実行するJavaScriptソースコードを記述します。

以下のコードを入力します。


var result = [];
// ページ内のすべてのリンクを取得

let metaElm = document.createElement("meta");
metaElm.name = "viewport";
metaElm.content="width=device-width,initial-scale=1.0,maximum-scale=1.0";

document.getElementsByTagName("head")[0].appendChild(metaElm);

// completionを呼び出して終了
completion(result);