0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

メディアクエリの(update: slow)では判定できないE-ink端末もあるようです

Last updated at Posted at 2024-10-15

かなりニッチですし、業務でも扱うことはないと思いますが興味深かったので共有です。

今更ながら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のモノクロの端末で画面キャプチャを撮影するとカラーになるのはその筋では有名ですが、ブラウザもカラー表示として処理しているようです。

参考情報

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?