スマホで全体が極端に小さく表示されるときの対処（viewport設定）

なぜスマホで縮んで表示されるのか

スマートフォンのブラウザは、viewportの指定がないページを「PC向けに作られた広いページ」とみなし、初期では980px前後の仮想的な幅でレンダリングしてから画面に縮小して収めます。これがページ全体が小さく見える正体です。

つまり文字やボタンが小さいのはCSSのせいではなく、ページ全体が縮尺をかけられて表示されているためです。CSSのfont-sizeをいくら大きくしても、縮小がかかっている限り根本解決にはなりません。

この問題はviewportメタタグを1行追加するだけで解消します。逆に言えば、レスポンシブ対応の第一歩はこの宣言です。

正しいviewportの書き方

headの中に、width=device-widthとinitial-scale=1.0を指定したviewportのmeta要素を入れます。width=device-widthで仮想幅を実機の画面幅に合わせ、initial-scale=1.0で初期倍率を等倍にします。これでCSSのメディアクエリも正しく働き始めます。

この1行があるかないかで表示は劇的に変わります。既存ページで小さく表示される場合は、まずheadにこの記述があるかを最初に確認してください。

値の指定はwidthとinitial-scaleの組み合わせが基本です。これ以上に凝った指定は通常不要で、まずは標準形を入れることが大切です。

症状別チェック表

スマホで全体が極端に小さく表示されるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

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

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

確認と修正の手順

縮小表示の切り分けと修正は次の順序で進めると確実です。

1. ページのheadにviewportのmeta要素があるか確認する
2. なければwidth=device-width, initial-scale=1.0を追加する
3. 実機またはブラウザのデバイスモードで等倍表示になるか確認する
4. 横スクロールが出る場合は幅固定の要素(width:980pxなど)を探す
5. メディアクエリのブレークポイントが効くようになったか確認する

viewportを入れたのに横スクロールが出る場合

viewportを正しく設定しても横スクロールが残るときは、ページ内に画面幅を超える固定幅の要素があります。width:980pxのようなpx固定や、はみ出す画像、min-widthの大きい要素が典型です。

対策として、img,video,tableなどにmax-width:100%を与える、固定幅をpercentやmax-widthに置き換える、といった修正が有効です。原因の要素は開発者ツールでbodyより広い要素を探すと見つかります。

user-scalable=noで拡大を禁止すると見かけ上は収まりますが、アクセシビリティを損なうため推奨されません。根本のはみ出しを直すのが正攻法です。

実機でレビューしてもらうとき

viewportの効果は実際のスマホで開いて初めて正確に確認できます。デスクトップのデバイスモードと実機で挙動が異なることもあるため、修正版を実機で見てもらうのが確実です。

確認用のHTMLを相手のスマホですぐ開いてほしいときは、ギガサイト便にHTMLをドロップして発行される共有URLを送ると便利です。HTTPSが自動で付き、QRコードでの配布にも対応しているので、その場でスマホに読み込ませて確認できます。社内限定にしたい場合はメール認証(ワンタイムコード)などを併用してください。