継続は力なり＃４５
Webページが小さく表示される理由とその対処法（続き）
スマートフォンでは幅980ピクセル分が縮小表示される
実はほとんどのスマートフォンのブラウザは、実際の表示領域の幅に合わせて表示するのではなく、表示領域の幅が980ピクセルあるものとしてWebページを表示させる
（結果としてWebページはパソコンで見た時と同様のものが縮小表示されることのなる）
もしこのような仕組みになっていなければ、スマートフォン向けに作られていない（パソコンで見ることを前提として作られた）Webページを見た場合、まず最初にページ左上のごく一部（幅300〜400ピクセル分）しか表示されないことになる
レイアウトによってはサイトのロゴやナビゲーションの一部くらいは見えるかもしれないが、そのページの大部分は見えない状態になっているはずである
ページ全体の内容を把握したいユーザーの多くは、結局は画面を縮小して全体を確認することになる
でもそうであれば、最初から縮小された状態で全体を示した方がユーザーにとっては利便性が高いということになる
現在作られているWebページの多くはスマートフォン向けのレイアウト向けのレイアウトも用意されているが、スマートフォンが登場した当時はそのようなサイトはほとんどなく、現在でもスマートフォン向けのレイアウトが用意されていないページは存在している
そのようなサイトでも無駄な操作をすることなく閲覧できるようにするために、スマートフォンのブラウザの多くは最初からページ全体を縮小して表示する指定する仕様になっているわけである
縮小しないで実サイズで表示させる方法
しかしそのような仕様になっていると、スマートフォン向けのレイアウトを用意しているWebページでは逆に困ってしまうことになる
せっかくスマートフォンの幅に合わせて作成したレイアウトまでもが縮小表示されてしまうからである
そこでWebページを最初から実寸で表示させることも可能となるように、表示させる幅や拡大縮小率などを「meta要素」で設定できるようになっている
（これは元々は Apple の Safari の仕様でしたが、現在では多くのブラウザがサポートしている）
例
HTML
<meta name="viewport" content="width=幅, initial-scale=拡大縮小">⬇️
<meta name="viewport" content="width=375, initial-scale=1.0">初期状態の幅は、上のようにピクセル数で指定することも可能だが、スマートフォンの画面の幅は機器ごとに異なる
そこで、「その機器ごとの画面の幅のピクセルにする」という意味のキーワード「device-width」も指定できるようになっている
例
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">このmeta要素の指定を最初のサンプルに加えることで、iPhone 8 での表示結果は以下のように変わる
