【iPhone】viewport
2011年9月1日 8:29 PM
最近は、通常のホームページでもiPhoneやiPadで見る人が多いので、
最低でも崩れないようにはiPhoneで見せたい。
例え、iPhone用にホームページを作っていなくてもだ。
ヘッダーに以下の2行を入れれば、とりあえず文字が大きすぎたり、小さすぎたり、ボックスがずれたりと言うことは解消される。
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”viewport” content=”minimum-scale=0.25, maximum-scale=1.0, width=device-width, user-scalable=yes” />
あとは、vieportの説明を追加しておきます。
上記は、拡大率0.25〜1.0に設定。ユーザーに拡大縮小を許可にしてあります。
<meta name = “viewport” content = “width = device-width, initial-scale = 1, user-scalable = yes”>
だと、画面はiPhoneの横幅に合わせて、初期の拡大率が1で、ユーザーに拡大縮小を許可という事です。
| width | デバイスの横幅 | 980px | device-width（iPhoneの横幅に合わせる） device-height（iPhoneの縦幅に合わせる） |
| height | デバイスの縦幅 | device-width（iPhoneの横幅に合わせる） device-height（iPhoneの縦幅に合わせる） |
|
| initial-scale | ページが最初に読み込まれた時の拡大率 | 1 | minimum-scale と maximum-scaleの範囲に準ずる |
| user-scalable | ユーザーに拡大縮小を許可 | yes | yes か no |
| minimum-scale | 拡大率の下限 | 0.25 | 0 から 10 |
| maximum-scale | 拡大率の上限 | 1.6 | 0 から 10 |
※iPad、Androidも同様。
コメントフィード
トラックバックURL： https://takanix.com/wp-trackback.php?p=504