YANO's digital garage

Copyright ©YANO All rights reserved. https://www.bravotouring.com/~yano/

Last-modified: 2024-03-20 (水)


[一語一絵/IT系]

dpiスケーリングの憂鬱 / 2016-12-21 (水)

スケーリング125%に設定したT460sで憂鬱再燃。

Webブラウザの画像がぼやける
Webブラウザの画像がぼやける

いわゆるスマートフォン対応に際して画面サイズは多種多様ではあるものの、これさえ唱えておけば万事良さげに調整してくれるという「業界標準」な

<meta name="viewport" content="width=device-width,initial-scale=1">
という呪文にお任せしていたのだが、よく考えると元祖iPhoneの320×480からiPhone 6sやNexus 5の1080×1920、iPad Airの1536×2048までディスプレイの大きさと解像度(dpi)も雲泥の差があるのに、見た目は然程変わらないという"不自然な自然さ"がある。正確に言うと高密度ディスプレイにおいては「1ポイント≒1ドット」という前提が成り立たなくなった為、640×960のiPhone 4でもアプリケーションは320×480想定で動かしておいてプラットフォーム側でデバイス解像度に合わせて調整する仕組み、つまり「DPIスケーリング」という事だ。

例えば[External]QuirksMode:Screen size testsで調べてみると、Windowsデスクトップ(WUXGA:1920×1200)だと

screen.width/height = 1920 / 1200
documentElement.offset = 1226 / 600
documentElement.client = 1226 / 887
window.innerWidth/Height = 1226 / 887
window.devicePixelRatio = 1
window.page = 0 / 0
であるのに、Nexus 5(FHD:1080×1920)だと
screen.width/height = 360 / 640
documentElement.offset = 980 / 1334
documentElement.client = 980 / 1393
window.innerWidth/Height = 980 / 1394
window.devicePixelRatio = 3
window.page = 0 / 0
となるので、文章はそれなりの大きさで表示は収まるものの「横幅は360px」なので「width=320px」の画像が横いっぱいに表示されるなんとも不細工な結果になっていた。

本来であれば[External]Window.devicePixelRatioを見て「1ポイント=2ドット、3ドット」という構成に対応する必要があったものの、[External]メディアクエリでカテゴリ分けするというのも付け焼き刃的で釈然とせず悶々としていたのだが、スケーリング125%に設定したT460sでは

screen.width/height = 1536 / 864
documentElement.offset = 1114 / 600
documentElement.client = 1114 / 682
window.innerWidth/Height = 1114 / 682
window.devicePixelRatio = 1.25
window.page = 0 / 0
となり、スマホに限らない根本的な問題であることに気付いた。

スタイルシートなどでpx単位の指定をしているのが悪く、敢えて指定しない方がいいのかも?と思ったが、結局ドットbyドット構成でも実際に大きな画像はその大きさで表示されていたので、スケーリングされてしまうと"ぼやける"のは変わらず。「target-densitydpi=device-dpi,width=device-width」も効かないようだ。

【参照】
●Re Simple inc.(リシンプル) https://www.re-simpleinc.com/
スマートフォンに対応するViewport設定について 2015年10月15日
●ichimaruni-design http://ichimaruni-design.com/
viewportの指定はどうするのが適切なのかいろいろ検証してみた 2015年1月16日
●Qiita http://qiita.com/
iPhone/iPad解像度(画面サイズ)早見表 2015年5月8日
iPhone6の時代のviewport設定について 2015年5月8日
もう逃げない。HTMLのviewportをちゃんと理解する 2016年2月27日
●Rriver http://parashuto.com/rriver/
気になるサイズの話 – px pt dpi 2010年8月3日
Media Queriesの基本についてまとめてみた 2011年5月9日
いまさら聞けないRetina対応のための「ピクセル」の話 2013年4月1日
もう、レスポンシブでいいんじゃない? 2016年11月17日
●QuirksMode - for all your browser quirks http://www.quirksmode.org/
Screen size tests
●Webデザインレシピ http://webdesignrecipes.com/
CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き 2011年7月13日
●田中達彦のブログ https://docs.microsoft.com/ja-jp/archive/blogs/ttanaka/
アプリの高DPI(High DPI)対応について 第1回 ~ 高DPIとは ~ 2014年7月16日
アプリの高DPI(High DPI)対応について 第2回 ~ アプリケーションの高DPIへの対応レベル ~ 2014年7月24日
アプリの高DPI(High DPI)対応について 第3回 ~ マニフェストでアプリのDPI対応レベルを変更する ~ 2014年8月22日
アプリの高DPI(High DPI)対応について 第4回 ~ 高DPIへの対応例 : Windowsストアアプリの対応方法 ~ 2014年9月3日
●Mozilla Developer Network https://developer.mozilla.org/ja/
ウェブデベロッパーガイド
メディアクエリ
Web API インターフェイス
Window.devicePixelRatio
●Wikipedia https://ja.wikipedia.org/wiki/
ピクセル
解像度
Retinaディスプレイ