jnobuyukiのブログ

研究していて困ったことやその解決に関するメモ。同じように困ったあなたのために。twitter ID: @j_nobuyuki

ブラウザのHigh DPI対応

最近のラップトップPCは、非常に高い解像度のスクリーンのこともあります。今回は、高解像度のために多少手こずった話をまとめておきます。

指定したサイズにウインドウが生成されない

問題の発端はこれでした。Chrome拡張を利用したアプリを作成する際、manifest.jsonのsizeで生成されるウインドウのサイズを指定できます。でもなんとなく画面の解像度に対して、大きな画面が出力される気がしたので、調べてみました。

ブラウザのconsoleで画面の大きさを調べる方法は以下の通りです。

//ウインドウの幅
window.innerWidth;
//ウインドウの高さ
window.innerHeight;
//ウインドウの開始位置 垂直方向
window.screenY; //IEの場合はwindow.screenTop;
//ウインドウの開始位置 水平方向
window.,screenX; //IEの場合はwindow.screenLeft;

これで調べてみました。するとmanifest.jsonで800x600設定したはずのウインドウが1200x900で表示されました。いろいろなサイズで調べてみたところ、かならず元の設定の1.5倍の大きさになっています。

高DPIに対応するためのズーム

今まで知らなかったのですが、アプリケーションがそれぞれ自動的にズームをしていることが、検索の結果からわかりました。最近の高DPIの画面は、デスクトップで大きなモニターを使うなら問題ありませんが、ラップトップで高DPIにすると文字や絵がきれいだけど小さくうつります。これに対応するため、あらかじめWindowsがズームを設定しています。各アプリケーションはその倍率を元に表示する大きさを変えているようです。これを調べたかったら、ブラウザのconsoleで

window.devicePixelRatio

としてみてください。出力結果が1ならズームなし、1.25なら125%のズーム、1.5なら150%のズームが設定されています。

高DPI対応の設定を変更する方法

デスクトップ画面を右クリックして画面の解像度を選びます。出てきたウインドウでテキストやその他の項目の大きさの変更をクリックします。
f:id:jnobuyuki:20141205054709j:plain

すべての項目のサイズを変更するというメニュでスライダーがあるので、これで設定します。
(私の場合は、最小の場合がズームなしでした。)
f:id:jnobuyuki:20141205054632j:plain

注意すべきことは、適用を押して見た目が変わったとしても、アプリケーションが試用するdevicePixelRatioの値が変わっていない可能性があることです。なので、設定を変更したら、念のためログオフか再起動をしましょう。