ダンコーガイ氏の方法も試してみたんだけど、うまくいかなかった。あと @media screen
な方法にはバグがあるらしいので、UserAgentで振り分けてiPhoneにだけ専用CSSを適用させることにした。P_BLOGにはUAごとに適用するCSSを切り替える機能が付いているのでとっても簡単。
ダンコーガイメソッドはメニューバーなどをCSSで display: none;
にして見えなくするやり方なわけだけれど、それをそのまま真似したらメニューバーの部分が空白になるだけで、コンテンツ部分にフォーカスされなかった。そういうわけなので、#contentの親要素である#wrapperにもCSSで min-width
を指定してやり、さらにその後#contentに min-width
を指定してやった。で、↑にご覧の通り、iPhoneに最適化されて表示されるようになった。