かなりニッチですし、業務でも扱うことはないと思いますが興味深かったので共有です。
今更ながらwindow.matchMedia
の存在を知りまして、E-ink端末はメディアクエリで判定できるのかなって思い、自分のサイトにメディアクエリの判定結果一覧を確認できるページを作りました。
Webの情報を漁ると、E-ink端末のような電子ブックリーダーはメディア特性(update: slow)
で判定できる、という情報がありましたが、実際にBOOX Note Air(初代)で調べたところ、ChromeとFirfoxでは
-
(update: none)
-> false -
(update: slow)
-> false -
(update: fast)
-> true
となり、通常のディスプレイで表示するときと何も変わらないことがわかりました。
この端末には「Neo Browser」というプリインストールされたブラウザがありますが、私のサイトは2023年または2024年になってからようやくメジャーなブラウザ全てでサポートしたcssとjsをかなり使っているせいか、何も確認できませんでした。
他の環境も色々比較したところ「prefers-reduced-motion」の項目だけ、当該端末では「reduce」、他の端末の初期設定では「no-preference」と違いが出たので、こちらを使えばある程度判定はできるようです。
このメディア特性が使用される目的とは違いますが、E-ink端末でスタイルを分ける場合もアニメーションを抑止するために使用すると思いますので、問題ないかなと思います。
そもそもアニメーションを使わなければすべて解決する、という身も蓋もない手段もありますが。
余談
ちなみにこの端末ですがモノクロなのに、(color-gamut: srgb)
、(color)
、(monochrome: 0)
がtrueになり、(monochrome)がfalseになります。
BOOXのモノクロの端末で画面キャプチャを撮影するとカラーになるのはその筋では有名ですが、ブラウザもカラー表示として処理しているようです。