JavaScriptでのメディアクエリ、matchMedia()の使い方を解説
メディアクエリと言えば、CSSの@mediaでスクリーンサイズに合わせて最適なスタイルを適用するものを思い浮かべる人が多いと思います。JavaScriptで実装したコンポーネント、例えば、スライダーなどをレスポンシブ対応にする際にはJavaScriptでメディアクエリを扱った方が便利です。 JavaScriptでのメディアクエリ、matchMedia()の使い方を紹介します。 Working with JavaScript Media Queries by Marko Ilic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに matchMedia()の使い方 条件の変化を継続的にチェックする方法 昔ながらの方法 まとめ はじめに メディアクエリと言われて最初に思い浮かぶのは何ですか？ おそらく、下記のようなCSSでしょ
[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
![[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny](https://cdn-ak-scissors.b.st-hatena.com/image/square/95e28eebf0596a7ba67bec80b26b3d4e01b6cc91/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019011910.png)
Current Device - デバイス判定をスタイルシートに反映 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページにアクセスするデバイスが多様化している中、JavaScriptで各デバイスを判別して表示分けしているWebサイトも多いのではないでしょうか。こういった実装を都度行うのはとても面倒ですし、条件分岐も増えがちです。 そこで使いたいのがCurrent Deviceです。デバイスに応じてスタイルシートにクラスを追加してくれるライブラリです。 Current Deviceの使い方 macOSのデスクトップからアクセスした場合です。それぞれのデバイスに応じてハイライトが変わります。 DOMを見てみると、htmlタグにクラスが追加されています。 Current Deviceを使うことでクラスの有無によってデバイス判定ができるようになります。画面の向きも判定されます。JavaScrip
ブラウザからデバイスに、OSまで！UA判定に便利なライブラリ「UAParser.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのつっちーです。 UA判定処理って、自分で書くのは面倒ですよね。条件をそのたび調べたり、微妙に書き間違えて正しく動作しなかったり……。 今回は、そんなUA判定に便利なライブラリ、UAParser.jsについて取り上げたいと思います。 UAParser.jsの特徴 UAParser.jsは、下記のような特徴をそなえたjavascriptライブラリです。 導入方法が豊富 判定可能な要素が多い 簡単に使える まず、導入方法としてはCDNから取得、Node.jsでバンドルなど、さまざまな選択肢があります（今回の記事では一般的な2つの導入方法をご紹介していきます）。 そしてこのUAParser.jsは、ブラウザだけでなく、デバイス情報、OSまで、多くの要素を判定可能です。そう聞くとなんだか処理が面倒くさそう、と思ってしまいますが、使い方はとても簡単です。 参考UR
[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js
スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができる超軽量（1kb）スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub Feature.jsの特徴 Feature.jsの使い方 Feature.jsの特徴 Feature.jsは、ユーザーが利用するスマホ・タブレット・デスクトップのブラウザの機能を判別し、利用することができます。 WebGL, Canvasをはじめ、単位にremが使えるか、async属性は利用できるか、といった実用的なものが多数揃っています。また、いくつか補足事項があります。 touch タッチイベ
![[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/02491c4eeaaee338bf6a3bba36d56f47a7ba450b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016011204.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
