iPhone 4へ機種変更する際に気になっていた点のひとつに、ディスプレイサイズが変わることで従来のiPhone向けサイトの表示が乱れるのではないか、ということがありました。しかし、今のところ大きく乱れるようなことはありません。
試しに、3種類のviewportを指定し、320×320ピクセルの画像を表示させると次のようになります。
| width | iPhone 4 | iPhone 3G |
|---|---|---|
| device-width |  |  |
| 320 |  |  |
| 640 |  |  |
「width=device-width」と指定しているにも関わらず、iPhone 4でもiPhone 3Gと同じく320ピクセルとして扱われています。ここには載せていませんが、「initial-scale=1.0」としても同様です。
ということは、iPhone 3G/3GS向け（幅320ピクセル）のサイトを、2倍に拡大して表示しているようなものですね。このお陰で、従来のiPhone向けサイトも、そのままiPhone 4で表示することができます。
しかし、これでは、テキストは綺麗なフォントで表示されますが、画像はジャギーが発生します。iPhone 4でジャギーを発生させずに画像を表示するには、viewportを「width=640」とする必要がありそうです。
従来どおり、幅320ピクセルとしてデザインする場合は、できる限りパーツには画像を使わずCSSを使った方がいいかも知れません。
また、CSS3のメディアクエリによってiPhone向けスタイルシートを読み込ませる方法がありますが、こちらも従来どおりの「max-device-width:480px」で機能します。
ちなみに、JavaScriptの「screen.width」と「screen.height」でディスプレイサイズを取得しても、それぞれ「320」「480」が返ってきます。
というわけで、iPhone 3G/3GS向けにデザインされたサイトも、とりあえずは、そのままでもiPhone 4で同様に表示できるようです。
0 件のコメント:
コメントを投稿