スマホでズームできない・勝手にズームするときの対処

まず原因を切り分ける

「ズームできない」と「勝手にズームする」は見た目が似ていても原因が違います。前者はviewportのmetaタグで拡大が禁止されている可能性が高く、後者は入力欄のフォントサイズが小さいことでブラウザが自動的に寄せている可能性が高いです。まずどちらの症状かをはっきりさせます。

確認はシンプルで、フォーム以外の場所をピンチしてみてください。そこでも拡大できないならviewport側、フォームをタップしたときだけ寄るなら入力欄側、という見当が付きます。両方起きていることもあります。

viewportのmetaタグを見直す

headの中にあるviewportのmetaタグを確認します。user-scalable=no や maximum-scale=1.0 が指定されていると、利用者が拡大できなくなります。アクセシビリティの観点でも拡大を奪うのは避けたいので、特別な理由がなければ外します。

推奨は width=device-width, initial-scale=1 のシンプルな指定です。これでデバイス幅に合わせて表示され、拡大も許可されます。テンプレートやAIが生成したHTMLには拡大禁止が紛れていることがあるので、生成物はここを必ず見ます。

症状別チェック表

スマホでズームできない・勝手にズームするは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

入力欄の自動ズームを止める

iOSのSafariは、入力欄のフォントサイズが16px未満だとタップ時に自動で拡大します。これが「勝手にズームする」の典型です。input、textarea、selectのfont-sizeを16px以上にすると、この自動拡大は起きなくなります。

デザイン上どうしても小さく見せたい場合でも、実寸のfont-sizeは16px以上にしておき、見た目はpaddingやレイアウトで調整するほうが安全です。フォントサイズを小さくして回避しようとすると逆効果になります。

手順でチェックする

実機やブラウザの開発者ツールのモバイル表示で、次の順に確認すると早く原因にたどり着けます。

1. headのviewport metaタグから user-scalable=no と maximum-scale を取り除く
2. viewportを width=device-width, initial-scale=1 に整える
3. input・textarea・select の font-size を16px以上にする
4. 実機のSafariとChromeで、フォーム以外のピンチ拡大とフォームタップ時の挙動を確認する
5. 問題が残る場合は外部CSSやリセットCSSで上書きされていないか調べる

確認した結果を相手に見せる

スマホ表示の崩れは、PCで見ている本人より、実機で見る相手のほうが先に気づくことがよくあります。直したHTMLを早めに関係者の手元の端末で確認してもらえると、見落としを減らせます。

ギガサイト便はHTMLをドロップするだけで 〇〇.giga-site.com 形式の共有URLが発行され、スマホでもそのまま開けます。同じURLのままファイルを差し替えられるので、viewportやフォントサイズを直すたびにリンクを送り直さず、相手に再読み込みしてもらうだけで最新の表示を確認できます。