iOSでは、フォントサイズが16px未満の input や select などのフォーム要素にテキストを入力しようとした際に、画面が自動的にズームされる仕様があります。
これはユーザーが小さな文字を見やすくするための機能ですが、この機能によってデザインが崩れるなどの問題が発生することがあります。（下記動画参照）
本記事では、iOSでの自動ズームを防ぐ方法と、Bubbleにおける実装手順を解説します。
iOSで自動ズームが発生する理由
まず、IOSで自動ズームが発生するのはなぜなのでしょうか？
iOSのSafariでは、視認性の向上を目的として、フォントサイズが 16px 未満の input などの要素にフォーカスした際、自動的にズームインする仕様があります。
この機能により、フォーム入力時に画面が拡大され、レイアウトが崩れることがあります。
コードを入力することで解決できる！
この問題は、コードを入力することで解決できます。
ページごとに挿入する場合と、サイト全体で挿入する場合がありますので、下記にて具体的に実装方法を解説します！
Bubbleでの実装方法
1. ページごとに設定する場合
方法
特定のページにのみ適用したい場合、 Page HTML Header に meta viewport を追加します。
手順
- Bubbleエディターを開く
- 設定したいページ を開く
- Page HTML Header に以下のコードを追加
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
以下の画像のように、Bubbleの Page HTML Header に設定を追加します。
この設定を行うと、該当ページ内の input や select 要素にフォーカスしても、iOS端末で自動的にズームされなくなります。
2. サイト全体で適用する場合
方法
サイト全体で一括して適用する場合は、 Settings > SEO/meta tags の「Script/meta tags in header」に meta viewport を設定します。
手順
- Bubbleエディター の Settings を開く
- SEO/meta tags タブを選択
- 「Script/meta tags in header」 に以下のコードを追加
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
- 変更を保存し、デプロイ
以下の画像のように、 SEO/meta tags に設定を追加します。
注意点
すでに meta viewport を設定している場合、 maximum-scale=1 を追加すると、ズーム機能が完全に無効化されるため、ユーザーが手動でピンチズームを行うこともできなくなります。
この影響を考慮し、必要に応じて フォーム要素のフォントサイズを16px以上に設定するなどを検討してください。
まとめ
- iOSではフォントサイズ16px未満の input にフォーカスすると自動ズームが発生する
- meta viewport を使用することで、iOSの自動ズームを無効化できる
- Bubbleでは、ページごとまたはサイト全体で meta viewport を設定できる
- ズーム無効化の副作用（手動ズーム不可）に注意しながら実装する
