いろいろひろってきたiPhoneおぼえがき

htmlをiPhoneに対応させる

そもそもwidthは

・縦:portlaitモード(320px)約1/3
・横:landscapeモード(480px)約1/2

(1)metaタグにviewportを使う

<meta name=”viewport” content=”width=device-width” />
 デバイスにあわせる(一番簡単なんだけどスクロール分の余白ができてしまう)

<meta name=”viewport” content=”width=320; minimum-scale=1.0; maximum-scale=2.0;” />
 iPhone用に誰かが作ったやつをちょっと書き換えた(ばっちり!GJ!I think..) 

<meta name=”viewport” width=”480, user-scalable=no, maximum-scale=0.6667″ />
 作りこんだ通りのサイズで、そのまま表示させたい場合(不明つうか、なんかうまくいかない)

 initial-scale 倍率の初期値 乗数で指定(例:120%の場合は1.2)
 inimum-scale 倍率の最小値 乗数で指定
 maximum-scale 倍率の最大値 乗数で指定
 user-scalable 拡大縮小の可否 (ye/no)

(2)CSS振り分け

<link media=”only screen and (max-device-width:480px)” href=”ipodtouch.css” type=”text/css” rel=”stylesheet”/>
<link media=”screen and (min-device-width:481px)” href=”pc.css” type=”text/css” rel=”stylesheet”/>
 ばっちり動きました

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

CSS3

・テキストサイズなど
 {-webkit-auto-text-size-adjust:none;}
 自動アジャスト機能をオフにする
 {line-height: 1.8;}
 ラインはいとはこのくらい?

・タッピング
 a{-webkit-tap-highlight-color: rgba(00,33,99,0.60);}

・border-radius 角丸
 {-webkit-border-radius:10px;}

・box-sizing boxのwidth/heightに余白を含める
 {-webkit-box-sizing:border-box;} 余白を含める
 {-webkit-box-sizing:content-box;} 余白を含めない

・display:box 横並びのbox
 {display:-webkit-box;}

・border-image
 なんつーか、bgでボタンや囲みみたいなことができるっす
 {border-image:url(background.png) 10 20 / 10px 20px stretch;}
 stretch 拡大
 repeatくりかえす
 roundそのまま(だったか?)