WebサイトをiPhoneに対応させる
以上で述べたとおり、iPhone版SafariとPC版Safariには細かい点で多くの相違点があるものの、多くのWebサイトはiPhone版Safariでも問題なく表示できる。しかし、Webサイトによっては、若干の修正を加えるだけで、著しくiPhoneでの操作性を向上させることができる場合がある。まずは最小限の修正だけで、WebサイトをiPhoneで見やすいようにするテクニックを紹介しよう。
・ページの横幅を指定する
iPhoneはWebページをレンダリングする際、デフォルトではWebページの横幅が980ピクセルであると仮定してレンダリングを行う。そして、その結果をiPhoneのディスプレイの横幅である320ピクセル（iPhoneを横向きにして、横長の画面で閲覧する場合は幅480ピクセル）に収まるように縮小して表示する（図10、11）。
|
| 図10 iPhone版Safariの表示レイアウト（縦表示の場合） |
|
| 図11 iPhone版Safariの表示レイアウト（横表示の場合） |
最近のWebサイトは横幅が800～1024ピクセル程度での表示が想定されているものが多いため、多くのWebサイトではこのデフォルトの動作で問題なく閲覧できることが多い。しかし、たとえば段の幅が980ピクセル以下に固定されているような場合や、逆に980ピクセルを超える横幅が想定されている場合、iPhoneでは若干見にくい表示になることがある（図12）。この場合、HTML中のheadタグ内に「<meta name="viewport" content="プロパティ">」というタグを記述することで、Webページの横幅を指定すればよい（図13）。
|
|
| 図12 横幅が980ピクセルよりも小さいWebサイトの表示例 | 図13 viewportの設定によって横幅を調整した際のWebページ表示例 |
たとえば、Webページの横幅として800ピクセルを想定している場合、次のように指定すればよい。
<meta name="viewport" content="width=800">
また、プロパティでは幅だけでなく、拡大/縮小表示する際のスケールといったパラメータも指定できる（表2）。
| プロパティ | 説明 |
|---|---|
| width | 想定するWebページの幅 |
| height | 想定するWebページの高さ |
| initial-scale | ページの初期表示スケール |
| minimum-scale | ページの最小スケール。0以上10.0以下で指定する |
| maximum-scale | ページの最大スケール。0以上10.0以下で指定する |
| user-scalable | noを指定すると、ユーザー操作での拡大/縮小やスクロールを禁止できる。デフォルトはyes |