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

Javascript onMediaQueryはMedia Queryライクな振り分けをJavaScriptで実現するライブラリです。

CSS3ではMedia Queryという仕組みがあります。これはデバイスの画面幅や高さ、色などをキーにして専用のスタイルを適用する技術です。そして同様のメディアによる振り分けをJavaScriptにも提供するのがJavascript onMediaQueryです。


こちらはデスクトップの場合。

こちらはiPhoneの場合。画面幅を調整すればメッセージが変わります。

実際のコードです。contextによる指定で実行される関数が変わります。

Javascript onMediaQueryは画面幅を常に監視しているようで、Webブラウザウィンドウの大きさを変えるとメッセージが切り替わるようになっています。スマートフォンかタブレットかによる区別ではなく、画面幅に応じて最適な情報提供を考える際に使えるライブラリです。

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


MOONGIFTはこう見る

Media Queryを使うと、同じHTMLコードを使ってデバイスごとに異なる見栄えを提供できるようになります。HTML構造は変えないので開発工数が低減されます(コツも多いにありますが)。構造はHTML、デザインはCSSと適切に切り分けられるのもメリットでしょう。

そしてさらにデスクトップ向けに提供していたJavaScriptコードをデバイスごとに振り分けたいと考えた際にJavascript onMediaQueryが有効に使えるはずです。これまでのWebブラウザ、デバイスごとの区別ではない切り分け手法として知っておくと良いでしょう。

JoshBarr/js-media-queries

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2