DPIスケーリング

2016年から難航している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」の画像が横いっぱいに表示されるなんとも不細工な結果になっていた。

スケーリング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

5月に書いた「Windows 10 Fall Creators Update」。

日本マイクロソフトが2017年5月23日から2日間、都内で開催した開発者/IT技術者向けイベント“de:code 2017”においてリークされた続報が窓の杜の記事に。

4月12日から配信開始となったRedstone 2、“Creators Update"も相変わらず降ってきてないのだが。

個人的に気になるのは高DPI対応の件かな。

参照

窓の杜 http://forest.watch.impress.co.jp/

• Microsoft、「Windows 10 Fall Creators Update」を発表 ～4つ目の機能アップデート 2017年5月12日
• 最新「Windows 10 Insider Preview」で「Windows Story Remix」のテストが可能に 2017年5月12日
• 【“de:code 2017”レポート】Windows 10 Fall Creators Updateの新機能は開発者もうれしい 2017年5月30日
• 【“de:code 2017”レポート】HoloLensの可能性と開発時の注意点などを解説 2017年5月31日
• 【“de:code 2017”レポート】すでに始まった“声”のビジネスを支える“Cortana” 2017年5月31日
• 【“de:code 2017”レポート】HoloLensを装着したボディガードがエスコートする未来 2017年6月1日

田中達彦のブログ https://blogs.msdn.microsoft.com/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日

Microsoft Events & Seminars https://www.microsoft.com/ja-jp/events/

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

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

という呪文にお任せしていたのだが、よく考えると元祖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