基本のHTMLを作成する
最低限の制作環境が整ったところで、さっそく簡単なスマートフォン向けWebページを作成してみましょう。エディターを起動して、次のようなHTMLを用意します。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スマートフォンサイトテスト</title>
</head>
<body>
</body>
</html>
今回はHTML5で記述していますが、基本的にはHTML4やXHTMLなど、PC向けのHTML/XHTMLがほぼ利用できます（iモードなど携帯サイト用のHTMLは正しく表示できません）。続いて、基本的なマークアップを施していきます。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スマートフォンサイトテスト</title>
</head>
<body>
<h1>スマートフォンサイトテスト</h1>
<p>初めてのスマートフォン向けサイトです</p>
</body>
</html>
まずはここまでの状態でWebサーバーにアップロードしてみましょう。iPhone/Androidで確認するとそれぞれ以下のように表示されます。
サンプルコードをiPhoneで表示したところ
同じくAndroidで表示したところ
ここで、少し気になるところがあります。
Viewportの変更
一見して分かるのは、文字が非常に小さく、右側に余白が目立つことです。このままだと拡大しないと本文を読むのは難しいでしょう。
原因は「Viewport（ビューポート）」にあります。iPhoneやAndroidはPCサイトをそのまま表示できますが、画面が小さいため、PC向けのサイトを実際の縮尺で表示すると一部しか見えません。
PCサイトをiPhone/Androidで100%表示するとページの一部しか表示されない
そこで、スマートフォンは自動的にページを縮小して表示する仕組みになっていて、この時に利用されるのが「Viewport」という値なのです。たとえばiPhoneの場合、Viewportが「980×1470ピクセル」に設定されています。つまり、横幅980ピクセルのディスプレイを、表示能力はそのままに小さくしたと考えるとよいでしょう。
Viewportの設定によって幅980ピクセルのディスプレイと同じように表示される
PC向けのサイトを見る場合には便利ですが、このままではスマートフォン向けに作成したサイトも小さく表示されてしまいます。そこで、次のようにmeta要素でViewportを変更できます。meta要素はhead要素内に記述します。
</head>
これで、以下のように適切な大きさで表示できます。
Viewportの値を設定すると意図したとおり適切に表示される
ここで紹介したViewportの書式は次の通りです。
各項目の意味は、次の通りです。
- ・横幅
- 画面の横幅をピクセル単位で指定します。ただし、スマートフォンの場合は機種によって画面の横幅がまちまちで、本体の向き（縦方向・横方向）によっても違いがあるので、通常は「device-width」という特殊な値を設定するとよいでしょう。device-widthを指定すると、端末の横幅で自動的に調整されます。
- ・初期の倍率
- 表示した時の画面の倍率を指定します。たとえば「1」を指定すると1倍、「2」を指定すると2倍になります。
- ・拡大可能な最大の倍率
- スマートフォンは2本指でピンチ（iPhone）したり、拡大ボタンをタップ（Android）したりすることで画面を拡大できます。この時の最大の倍率を指定します。「1」を指定すると拡大できなくなります。
画面を横にしたときの処理
先ほど作成したページを表示した状態でスマートフォン本体を回転すると、画面が自動的に拡大されて表示されます（iPhone 4で回転ロックがかかっている場合は外してください）。
本体を回転すると画面が拡大して表示される
これはこれで見やすいかもしれませんが、多くの場合は横にしたら文字の大きさはそのままで、1行の文字数が増えることを期待するはずです。このような場合には、Viewportの「maximum-scale」を「1」に設定します。
これによって、本体を横向きにしても文字の大きさを変えずに1行の文字数を増やせます。サイトの性質にあわせて設定するとよいでしょう。
