fc2ブログ

IPHONEサイトの作り方

Posted by html5_newbie on 09.2010 IPHONE 0 comments 0 trackback
HTMLのAPIの前に、IPHONEサイトについて勉強してみました。

ここでいうIPHONEサイトの定義は、IPHONE向けにカスタマイズされたWebサイトとします。

そして、例のごとく、グーグル先生にいろいろ聞いてみたところ、このサイトが一番わかりやすかったので、こちらを主に参考にしました。

IPHONEのブラウザは、MOBILE SAFARI
なので、サンプルもSAFARIで行います。

まず、IPHONEの表示領域のことをviewportと呼びます。

IPHONE 縦のモード・・・portlaitと呼び、幅320px
IPHONE 横のモード・・・landscapeと呼び、幅480px

このviewportは、HTMLのmetaタグで指定します。
Mobile Safariのデフォルトは、

width=980(幅)
initial-scale=1.0(初期倍率)
user-scalable=yes(拡大の許可フラグ)
maximum-scale=3.0(最大拡大サイズ)

です。以下がデフォルトの記述例です。

<meta name="viewport" content="width=980,initial-scale=1.0,user-scalable=yes,maximum-scale=3.0" />

このwidthにはdevice-widthと指定することができます。device-widthと指定した場合、幅は、portlaitの場合320px、landscapeの場合480pxとなります。

IPHONEでは一部HTML5とCSS3が現時点でも利用可能です。
また、携帯サイトなどでお馴染みの、telやmailtoもIPHONEサイトでは利用できるようです。

今回のIPHONEサイトサンプルは、Safariで閲覧してください。また、なんとなくIPHONE感を出すために、ブラウザの大きさを幅320px、横480pxなどで見ることをお勧めします。

IPHONEサイトサンプル

---
2010/7/1追記 以下の記事も参考にどうぞ

HTML5とjQTouchでIphoneサイト その1 アニメーションの書き方

▶ Comment

▶ Post comment


  • 管理者にだけ表示を許可する

▶ Trackback

trackbackURL:http://html5.blog20.fc2.com/tb.php/24-9677ee15