PCサイトをCSSだけでiPhone (iPod touch)に対応させる方法が


紹介されていました。


今後のためにメモっておきますひらめき電球


PCサイトをCSSだけでiPhone (iPod touch)に対応させる方法

以下引用です。


iPhone

縦型 portlait モード(横320px)  約1/3

横型 landscape モード(横480px) 約1/2


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

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


JavaScriptでユーザエージェントの判別を使わずに、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"/>


[if IE]

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


iPhone向けCSS

テキストサイズ
html{
-webkit-auto-text-size-adjust: none;
}

html{
line-height: 1.8;
}

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

角丸
div#mixi{
-webkit-border-radius:10px;
}