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などで見ることをお勧めします。
---
2010/7/1追記 以下の記事も参考にどうぞ
HTML5とjQTouchでIphoneサイト その1 アニメーションの書き方
