ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

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


iPhoneで縦の場合。デバイスの種別やOS、向きが判別できています。


横向きにすれば判定が変わります。


タブレットの場合も同様です。


HTMLソースです。htmlのクラスに追加されています。


向きを変えればhtmlのクラスがリアルタイムに変わっています。

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


MOONGIFTはこう見る

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

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

Matthew Hudson / Device.js

matthewhudson/device.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2