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

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

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

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

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

自作ページは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アプリから実装が可能です。

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

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

https://www.icloud.com/shortcuts/33be8d3193b64a959808c0128920bfd7

注意点

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);

以上でショートカットの設定は完了です。

動作確認

作成したショートカットの動作確認をしてみましょう。

Googleのトップページにあるテキストボックスを使ってみます。

Safariでページを開き、「共有」から「ズームインさせない」をタップします。

警告メッセージが表示されますので、「許可」をタップします。

こうすることで、以下の動画のとおりズームインされなくなります。

iOS ショートカットアプリは結構便利

ショートカットアプリはプログラミング言語を書かなくてもそこそこ自動化することが出来ます。

用意されているアクションは決まっているので、そこから選べるものしか使えませんが、Bluetoothやマップなど多くのものを自動化することができます。

日常生活の中で長い時間を共にするデバイスなので、ショートカットアプリで自動化してみてはいかがでしょうか。

カテゴリー: iOS

コメントを残す

メールアドレスが公開されることはありません。