メモ「誰でも出来るiPhoneのウェブサイト」

iphoneの特徴

・safari3.1搭載
・css3に一部対応

・ orientation（画面の回転状況）
> portlait　幅320px
> landscape　幅480px

・ viewpoint（仮想スクリーン）
何も指定しないと幅980pxとして画面表示される

・マルチタッチ
> pinch in, pinch out（拡大縮小）
> double tap

制作環境
・SDK　http://developer.apple.com/iphone/program/
・iPhoney 　http://www.marketcircle.com/iphoney/

Tips
・画面回転させても、表示サイズ が変わらないようにする
> metaタグで下記のように指定

<meta name=”viewport” id=”iphone-viewport” width=480, user-scalable=no, maximum-scale=0.6667″ />

・iphone用のcssを適用させるには
> 下記のような設定をする

<link media=”only screen and (max-device-width:480px)”  href=”iphone.css” type=”text/css” rel=”stylesheet” />
<link media=”screen and (min-device-width:481px)”  href=”pc.css” type=”text/css” rel=”stylesheet” />
<!–[if IE]>
<link href=”ie.css” rel=”stylesheet” type=”text/css” />
<![endif]–>

※iphoneのmediaはhandheldじゃなくてscreen
画面の幅で切 り分ける
※IEだけは別っこで指定してあげる

・css3の記述でよりリッチな表現に
> CSS3の属性セレクタ例

a[href^="mailto:"]{ background-image:url(email.gif); }
a[href$=".pdf"]{ background-image:url(pdf.gif); }

※リンクがmailtoで始ま るなら、emailの画像
リンクがpdfで終わるなら、pdfの画像を表示

その他
・cssでリキッドレイアウトに（横幅100%に）

・行間は 広めに設定する（line-height : 1.8;）

・padding と margin も広く設定

・拡大機能を 使えないようにもできる
html{ webkit-auto-text-size-adjust: none; }

・タップし たときのcss表現
a{ -webkit-tap-highlight-color : rgba(00,33,99,0.60); }

・ iphoneの公式情報
http://developer.apple.com/iphone/

・CSS3の対応状況
http://westciv.com/iphonetests/