JavaScriptでAndroidの画面サイズを取得したいが…。

Question

JavaScriptで画面サイズを取得したいと思っています。
コードとしては以下です。

screen.width
screen.height

Web上で同様の機能を提供しているページでも確認しましたが、どこも同じ実装・同じ結果でした。
画面サイズを取得する
IPアドレスや画面解像度など確認くん - instant tools
パソコンの、現在のウィンドウサイズ[画面サイズ]を調べる

Win7ではChrome, Firefox, IEともに、ディスプレイのカタログスペック上の値と同じ値を取得できました。

しかし、Android+Chromeで実行すると値が半分になりました。
具体的にはNexsus7 2013でアクセスしました。
タブレット | Nexus 7 (2013) | ASUS 日本
カタログスペックでは「1,920×1,200ドット」となっています。

しかしAndroid+Chromeだと
「横 : 960 × 縦 : 600」となります。

ブラウザが悪いのかと思いAndroid+Firefoxで試すと
「横 : 960 × 縦 : 552」となりました。

CPU-Zでも試してみましたがこれだと
「横 : 1920 × 縦 : 1200」となりました。

Android+Chromeで「テキストの拡大と縮小」
Android+Firefoxで文字サイズの変更
の設定を変更しましたが、状況は変わりませんでした。

ネイティブのAPIでは正しく取得できるけど、JavaScriptだと正しく取得できない上、ブラウザの実装によって値が異なってしまうかのような状態です。ただ、そうだとするとMedia Queriesを使っても同様の問題が起きるような気がします。もしかしたらモードの切り替え機能があって動画などのソフトではフルサイズ使えブラウザなどでは半分のサイズなのかなと思っています。でさらに、何か設定を変えるとブラウザでもフルサイズを使えるようになるのかもと思っています。

一番の目的はJavaScriptでカタログスペック上の値を取得することです。ただ、もしも出来ないのだとしてもその原因を正しく把握したいと思っています。

質問は以下です。
・Android+ブラウザ経由で、「screen.width」などのコードでカタログスペックの値が取得できないのはなぜか
・JavaScriptでカタログスペックの値を正しく取得する方法はあるか、あるならその方法

よろしくお願いします。

Answer 1

iOS端末では「Retina」と銘打って大々的に導入されていますが、最近のモバイル端末では、物理的なピクセル数と論理的なピクセル数が一致しなくなっています。

WebKit系だと、「devicePixelRatio」という値がありまして、これが「CSSやHTMLでの1ピクセルが、画面上の何ピクセルに対応するか」という値です。ここのデータによれば、Nexus 7（2013年版）は2とのことですので、取得したwidthを2倍すると物理的なピクセル数になります。

つまり、devicePixelRatio * JavaScriptで取得したピクセル数 = 物理的なピクセル数ということです。

Comments

[miu_ras]

なるほど…。物理と論理で別の値があって、Nexsus7上のブラウザでは論理が使われるのですね。

たしかに1920×1200だったら、PC用の23インチワイドくらいがそうですから、7インチでもそれと同じ扱いだったら字が小さくて読めませんから、その対策みたいなものなんですかね。

devicePixelRatioをかければいいという話も参考になりました。

ありがとうございました。