Webページにアクセスするデバイスが多様化している中、JavaScriptで各デバイスを判別して表示分けしているWebサイトも多いのではないでしょうか。こういった実装を都度行うのはとても面倒ですし、条件分岐も増えがちです。
そこで使いたいのがCurrent Deviceです。デバイスに応じてスタイルシートにクラスを追加してくれるライブラリです。
Current Deviceの使い方
macOSのデスクトップからアクセスした場合です。それぞれのデバイスに応じてハイライトが変わります。
DOMを見てみると、htmlタグにクラスが追加されています。
Current Deviceを使うことでクラスの有無によってデバイス判定ができるようになります。画面の向きも判定されます。JavaScript側でそれを使うのはもちろん、スタイルシートでの判定にも使えるでしょう。分岐処理がなくなり、Swiftなどによる処理分けになるのでコードの見通しも良くなるでしょう。
Current DeviceはJavaScript製のオープンソース・ソフトウェア（MIT）です。
MOONGIFTの関連記事
