スマホサイト縦画面と横画面でCSS分けてみた！

こんにちは～！ 今回は私のまわりではあんまり声が上がらなかったのですが、スマホサイト作ってたら縦画面のときと横画面のときの表示のされ方ってなんだか嫌になんないですか？ 一般的にviewportで指定すると思うのですが…。 文字とかでっかくなっちゃったりして、画像もでっかくなっちゃったりして。 i phoneとandroidで微妙に表示が違ったり。 でちょっと何とかしてやろーとググって見ましたのでそのご報告です。

jQuery SmartPhone SWITCH

サイトにアクセスしたOSと画面の向きを判別し、それぞれbodyタグにクラス名を追加してくれるというもの。

iPhoneには「body class=”iphone”」追加 iPadには「body class=”ipad”」追加 Androidには「body class=”android”」追加 それ以外には「body class=”other”」追加

画面が縦向きの場合は「body class=”portrait”」追加 画面が横向きの場合は「body class=”landscape”」追加

これによってandroidとiphoneの縦画面と横画面それぞれに独自のCSSを適用させることができます。 実際にやってみたところ、痒いところに手が届いて満足！でもソースが長くなってしまうのでスポット的に使う感じが良いですかねぇ。

今回お世話になった 「http://black-flag.net/」さんで詳しい内容が丁寧に解説されていますので、おんなじよーなこと思ったコトある方は試してみてください。

どーでもいいですが、判別系のものって動くとオオッ！ってなりますよねぇ。

現場のプロが教えるスマートフォンサイト制作ガイドブック[HTML5&CSS3&JavaScript] (Design & Web Technology)