https://www.bravotouring.com/~yano/archives/2020/03/02/ Recent content in 2020/03/02 on Yano's digital garage Hugo en-us Mon, 02 Mar 2020 23:39:08 +0900 https://www.bravotouring.com/~yano/diary/it/20200302_pixelratio.htm Mon, 02 Mar 2020 23:39:08 +0900 https://www.bravotouring.com/~yano/diary/it/20200302_pixelratio.htm <p><a href="https://www.bravotouring.com/~yano/diary/it/20161221_pixelratio.htm">2016年</a>から難航しているdpiスケーリングの憂鬱。</p> <table align="right" class="Panorama"> <tr> <td><img alt="キューオッタバイ、かぁ" src="https://www.bravotouring.com/~yano/images/2020/20200302_pixelratio.jpg"/></td> </tr> <tr> <td class="PhotoMemo">https://www.quirksmode.org/m/tests/widthtest.html</td> </tr> </table> <p>例えば<a href="http://www.quirksmode.org/m/tests/widthtest.html">QuirksMode:Screen size tests</a>で調べてみると、Windowsデスクトップ(WUXGA:1920×1200)だと<blockquote>screen.width/height = 1920 / 1200<br/>documentElement.offset = 1226 / 600<br/>documentElement.client = 1226 / 887<br/>window.innerWidth/Height = 1226 / 887<br/>window.devicePixelRatio = <span class="Topics">1</span><br/>window.page = 0 / 0</blockquote>であるのに、Nexus 5(FHD:1080×1920)だと<blockquote>screen.width/height = 360 / 640<br/>documentElement.offset = 980 / 1334<br/>documentElement.client = 980 / 1393<br/>window.innerWidth/Height = 980 / 1394<br/>window.devicePixelRatio = <span class="Topics">3</span><br/>window.page = 0 / 0</blockquote>となるので、文章はそれなりの大きさで表示は収まるものの「横幅は360px」なので「width=320px」の画像が横いっぱいに表示されるなんとも不細工な結果になっていた。</p> <p><a href="https://www.bravotouring.com/~yano/diary/it/20161119_thinkpad_t460s.htm">スケーリング125％に設定したT460s</a>では<blockquote>screen.width/height = 1536 / 864<br/>documentElement.offset = 1114 / 600<br/>documentElement.client = 1114 / 682<br/>window.innerWidth/Height = 1114 / 682<br/>window.devicePixelRatio = <span class="Warning">1.25</span><br/>window.page = 0 / 0</blockquote>となり、スマホに限らない根本的な問題であることに気付いた。</p>