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