iPhone用サイトで、画像を縦横ともに画面幅いっぱいにリサイズさせる //iPhone - bute_lab.

bute_lab.は、FlashのActionscriptやHTML,CSSなど、web制作に関する研究成果を記録するためのブログです。 iPhone用サイトを作る場合は、画面サイズが縦横で異なります。 画面解像度は320×480なので、コンテンツの幅が320と480の両方に対応して作ります。 表示の際の幅はmeta内のviewportで設定しますが、画面閲覧中に縦横を切り替えた場合の画像サイズの切替を行いたくていろいろ調べました。 下のサンプルでは、SitePoint内の記事を参考に、div#mainimage内のimg1.jpgの幅を、縦の場合は320×160、横の場合、480×240で表示します。 その他レイアウト等もCSS内に同様に記述することで、縦横で分岐することが出来ます。 今回のキーポイントは、iPhoneの表示角度を利用するときに使う、window.orientationで

[comuu]

iphone,webデザイン