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

制作環境
・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/