スマートフォン、タブレットの判別情報をHTMLに追加「Device.js」
Device.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
最近はスマートフォン、タブレット、デスクトップとWebブラウザごとの処理分岐が多くなっています。そのような時に都度ユーザエージェントで判別しているのでは面倒です。使ってみたいのがDevice.jsです。
[](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.1378041892.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.1378041901.png)
HTMLソースです。htmlのクラスに追加されています。
[](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によって処理を変更したい時に使えるでしょう。