簡易的なスマートフォン用ウェブページの対応

ウェブページを作ったはいいけど、スマートフォンの対応が必要な場合は確実に増えてくると思う。しかし、それ用のウェブページを作るなんて、ナンセンスだと思う。以下の meta タグを入れるだけで、スマートフォンの場合は /css/m.css を読み込んでくれる。

☆css の読み込み

<link type="text/css" rel="stylesheet" href="/css/m.css" media="only screen and (max-device-width:960px)" />

ここで、max-device-width を 960px にしているのは、現在スマートフォンの最高解像度を持つ iPhone4 の画面を横にした場合を考慮している。Android は 854px なのでこれに含まれる。この css をパソコン用の css の後に記述すれば、携帯用に値を上書きしてくれる。

☆js の振り分け

var device = (window.innerWidth > 960) ? true : false;

これも必要な場合に device の値を参照すれば処理を振り分けることができる。

ただ、これは単に画面サイズによって振り分けてるだけなので、キチンと userAgent を取って処理を分けた方がいいのも事実。あくまでも、「簡易的に」対応する場合に限られる。