花崗岩と砂漠とスラブとクラックが好きな「昔の人みたい」なスラ婆さんのブログ

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そのまま（だったか？）