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

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

  • 2008-07-05 (土) 21:00
  • 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″ />

[tips] iphone

・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だけは別っこで指定してあげる

[tips] iphone2

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

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

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

[tips] iphone3

その他
・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/

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

Search
Feeds
Contact
  • advice@shakehand.jp

Return to page top