RenzSpace Free Style Blog

結構落とし穴があったので、忘れないようにメモメモ。

まずはヘッダにお決まりの切り替えソース。

<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" href="iPhone用CSSパス" type="text/css" media="only screen and (max-width:480px)"/>
<link rel="stylesheet" href="PC用CSSパス" type="text/css" media="screen and (min-width:481px)" />

これだけで、PCサイトとiPhoneの切り替えはOK。

ただ、これをやるとIEにCSSが適応されないバグが発生。原因は不明。多分media=”"の部分だろう。

なので、以下を追記。

<!--[if IE]>
<link rel="stylesheet" href="PC用CSS" type="text/css" media="screen" />
<![endif]-->

これで、OKでした。

以上、メモ。