viewportによるブラウザのウィンドウサイズ指定
iPhone向けにブラウザのウィンドウサイズを指定する方法。
iPhoneの実際の画面サイズは、縦に持った場合320x480px、横に持った場合480x320pxとなります。
そのため、サイトによっては縮小表示されたりなどで、文字が読みづらいなどということが起きたりします。
これの対応として、iPhone用のSafariにはviewportというmetatagがあります。
これを設置しプロパティを設定することで、初回アクセス時にも最適なウィンドウサイズになります。
- viewportの設定
<html> <head> <meta name="viewport" content="[property]=[value]"> ･ ･ </head> <body> ･ ･ ･ </body> </html>
- プロパティと値
| プロパティ | 値 | デフォルト | その他 |
|---|---|---|---|
| width | viewportの横幅 | 980px | device-widthの指定が可能 |
| height | viewportの縦幅 | 横幅から計算 | device-heightの指定が可能 |
| initial-scale | 倍率の初期値 | 表示範囲から計算される値 | |
| minimum-scale | 倍率の最小値 | 0.25 | |
| maximum-scale | 倍率の最大値 | 1.6 |
※device-width:iPhone横持ちの場合でも必ず320px
※device-height:Phone縦持ちの場合でも必ず480px
