Webページにアクセスするデバイスが多様化している中、JavaScriptで各デバイスを判別して表示分けしているWebサイトも多いのではないでしょうか。こういった実装を都度行うのはとても面倒ですし、条件分岐も増えがちです。 そこで使いたいのがCurrent Deviceです。デバイスに応じてスタイルシートにクラスを追加してくれるライブラリです。

Current Deviceの使い方

macOSのデスクトップからアクセスした場合です。それぞれのデバイスに応じてハイライトが変わります。

DOMを見てみると、htmlタグにクラスが追加されています。

Current Deviceを使うことでクラスの有無によってデバイス判定ができるようになります。画面の向きも判定されます。JavaScript側でそれを使うのはもちろん、スタイルシートでの判定にも使えるでしょう。分岐処理がなくなり、Swiftなどによる処理分けになるのでコードの見通しも良くなるでしょう。

Current DeviceはJavaScript製のオープンソース・ソフトウェア（MIT）です。

Current Device matthewhudson/current-device: The easiest way to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).