Device.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

最近はスマートフォン、タブレット、デスクトップとWebブラウザごとの処理分岐が多くなっています。そのような時に都度ユーザエージェントで判別しているのでは面倒です。使ってみたいのがDevice.jsです。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 22.17.02_thumb.1378041888.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 22.17.02.1378041888.png)
iPhoneで縦の場合。デバイスの種別やOS、向きが判別できています。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 22.17.18_thumb.1378041892.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 22.17.18.1378041892.png)
横向きにすれば判定が変わります。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 22.17.49_thumb.1378041896.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 22.17.49.1378041896.png)
タブレットの場合も同様です。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 22.18.45_thumb.1378041901.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 22.18.45.1378041901.png)
HTMLソースです。htmlのクラスに追加されています。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 22.18.53_thumb.1378041905.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-01 22.18.53.1378041905.png)
向きを変えればhtmlのクラスがリアルタイムに変わっています。

Device.jsではOS(iOS/Android/Blackberry)、向き(縦または横)、種別(スマートフォンまたはタブレット)といった情報をHTMLタグに対して定義してくれます。これを基準にすれば処理判定がとても簡単になるでしょう。

MOONGIFTはこう見る

タブレットとスマートフォンでは大きな違いはないかも知れませんが、デスクトップとスマートフォンではイベントの名称が異なるので対処が必要です。例えばデスクトップではclickなのに対してスマートフォンではtouchstartを使います。

レスポンシブWebデザインは画面幅に対して表示を変えます。つまりデスクトップであっても画面幅を縮めればスマートフォン同様の表示を行います。Device.jsは幅に左右されず、デバイスやOSによって処理を変更したい時に使えるでしょう。

Matthew Hudson / Device.js

matthewhudson/device.js