htmlをiPhoneに対応させる

そもそもwidthは

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

(1)metaタグにviewportを使う

<meta name="viewport" content="[プロパティ]=[値](, [プロパティ]=[値])">

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

<meta name="viewport" content="width=device-width" />

デバイスにあわせる(スクロール分の余白ができてしまう)

<meta name="viewport" content="width=320; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0;" />

iPhone用に誰かが作った数値(ばっちり!initial-scaleはないほうがいいかも)

<meta name="viewport" content="width=320; minimum-scale=1.0; maximum-scale=2.0;" />

↑ちょっと書き換えた。このほうがいいかも(何故かは忘れた)

<meta name="viewport" width="480, user-scalable=no, maximum-scale=0.6667" />

作りこんだ通りのサイズで、そのまま表示させたい場合(不明)

(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用(IEではmedia="screen and "を読み込めない)

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

(3)既存のスタイルシート内にiPhone用のスタイルを追加する

外部スタイルシートを分けずに、またはhtml内にスタイルを宣言している場合にそれを生かしてiPhone用のスタイルを宣言することが可能。

p.text {
width: 780px;
font-size: 80%; }

上記の内容を下記のように追記して書き換え

p.text {
width: 780px;
font-size: 80%; }

@media screen and (max-device-width: 480px) {
p.text {
width: 480px;
font-size: 110%; }
}

CSS3

・テキストサイズなど

{ -webkit-auto-text-size-adjust : none; }

自動アジャスト機能をオフにする

{ line-height : 1.8 ; }

ラインハイトこのくらい?

・タッピングの色

a{ -webkit-tap-highlight-color : rgba(00,33,99,0.60); }

a{ -webkit-tap-highlight-color : #000; }でも可

・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 ; }

記述例

#container  {
  width: 100%; 
  display: -webkit-box;
  display: -moz-box;  


#main {
  width: 500px;
  background: #eee;
  min-height: 500px;
  -webkit-box-ordinal-group: 1; 
  /* Safari,Google Chrome用(1番目に表示 */ 
  -moz-box-ordinal-group: 1;
  /* Firefox用(1番目に表示) */ 
}  

#leftBox  { 
  width: 250px;
  background: #999;
  min-height: 300px;
  -webkit-box-ordinal-group: 2;
  /* Safari,Google Chrome用(2番目に表示) */
  -moz-box-ordinal-group: 2; 
  /* Firefox用(2番目に表示) */
}
  
#rightBox   { 
  width: 250px;
  background: #666;
  min-height: 100px;
  -webkit-box-ordinal-group: 3; 
  /* Safari,Google Chrome用(3番目に表示) */
  -moz-box-ordinal-group: 3; 
  * Firefox用(3番目に表示) */  }  

-webkit(moz)-box-ordinal-group:X;は順番を指定したいときに使う(ない場合は、記述した順番通りにボックスが配置)

・border-imageなんつーか、bgでボタンや囲みみたいなことができるっす

{ border-image : url ( background.png ) 10 20 / 10px 20px stretch; }

stretch 拡大
repeat くりかえす
round そのまま(だったか?)

・自動フォントサイズ調整を設定する

-webkit-text-size-adjust: (100% | none | auto);

・電話番号の自動リンク機能を設定する

<meta name="format-detection" content="telephone=no">

・自動校正

<input type ="text" autocorrect="on">

・自動大文字化(英文の1文字目)

<input type ="text" autocapitalize="on">

・iPhone用アイコンを使用する場合

<link rel="apple-touch-icon" href="/custom_icon.png" />

50×50くらいで。勝手に角丸アイコンエフェクトする。

・imgの幅を指定する

max-width:320px;
height:auto;

・table吐き出しの物はinlineにする

th,td,tr { display:inline }

・embedは非表示にする

embed { display:none; visibility:hidden; }

・カラムはなるべく使わず一列に

float:none;

Back to index.html