スマホテスト

最初のスマホサイト

まずは「Viewport(ビューポート)」iPhoneやAndroidはPCサイトをそのまま表示できますが、画面が小さいので、PC向けサイトを実際の縮尺で表示すると一部しか見えない。

そこで、スマートフォンは自動的にページを縮小して表示する仕組みになっていて、このときに利用されるのが「Viewport」という値となる。たとえばiPhoneの場合、Viewportが「980×1470ピクセル」に設定されている。つまり、横幅980ピクセルのディスプレイを、表示能力はそのままに小さくしたと考えるとよいでしょう。
PC向けのサイトを見る場合には便利ですが、このままではスマートフォン向けに作成したサイトも小さく表示されてしまいます。そこで、次のようにmeta要素でViewportを変更できます。meta要素はhead要素内に記述します。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
</head>
 ここで紹介したViewportの書式は次の通りです。
<meta name="viewport" content="width=【横幅】, initial-scale=【初期の倍率】, maximum-scale=【拡大可能な最大の倍率】">
各項目の意味は、次の通りです。

・横幅
画面の横幅をピクセル単位で指定します。ただし、スマートフォンの場合は機種によって画面の横幅がまちまちで、本体の向き(縦方向・横方向)によっても違いがあるので、通常は「device-width」という特殊な値を設定するとよいでしょう。device-widthを指定すると、端末の横幅で自動的に調整されます。
・初期の倍率
表示した時の画面の倍率を指定します。たとえば「1」を指定すると1倍、「2」を指定すると2倍になります。
・拡大可能な最大の倍率
スマートフォンは2本指でピンチ(iPhone)したり、拡大ボタンをタップ(Android)したりすることで画面を拡大できます。この時の最大の倍率を指定します。「1」を指定すると拡大できなくなります。