dpiスケーリングの憂鬱

Wed, 21 Dec 2016 23:24:34 +0900

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

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

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

例えば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」の画像が横いっぱいに表示されるなんとも不細工な結果になっていた。

本来であればWindow.devicePixelRatioを見て「1ポイント＝2ドット、3ドット」という構成に対応する必要があったものの、メディアクエリでカテゴリ分けするというのも付け焼き刃的で釈然とせず悶々としていたのだが、スケーリング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

となり、スマホに限らない根本的な問題であることに気付いた。

2016/12/21 on Yano's digital garage

dpiスケーリングの憂鬱