サイズや解像度が違うディスプレイ上で、文字がどれくらいの大きさで表示されるか比較するプログラムを作ってみました。
ディスプレイ表示サイズシミュレーター
作った経緯など
パソコンを買うとき、画面のサイズや解像度で悩みませんか？わたくし現在、猛烈に悩んでいます。
2年くらい前までは、どんなサイズのディスプレイでも同じサイズの中でいちばん解像度が高いものを買えば良かったので、楽でした。でも今は違います。あまりに高い解像度のディスプレイを買うと、文字が小さすぎて読むのが困難になってしまいます。
まあ、OSの機能を使って拡大表示すればいいのですが、あまり倍率を上げるとせっかくの高い解像度が無駄になります。完全に無駄かというと、解像度が高いほど表示が奇麗になるのでまったくの無駄ではありませんが、拡大し過ぎて情報量が減るのはもったいないと思ってしまうのです。一画面に表示できる情報量は多い方が良い、しかし表示が細かすぎると読むのが辛い。うーん、悩ましい問題です。
次に悩ましいのが、ディスプレイサイズが変わった場合に、表示される大きさがどのくらいになるのかが分からない事です。計算して想像すればなんとなくはわかるのですが、やっぱり目視しないとピンときません。
私が今、悩んでいるのは、15.6インチの4KディスプレイのノートPCを買うべきか、それとも17インチの4KディスプレイのノートPCを買うべきか、です。私の今までの判断基準では、解像度が同じなら持ち運びを考慮してディスプレイは小さい方を選びました。しかし4Kディスプレイとなると話は変わります。15.6インチだと【たぶん】150%位に拡大しないと読むのが辛いんじゃないかと思うのです。そして17インチなら、125%位でも読めるのではないかという淡い期待があります。でも逆に、17インチでも150%で表示しないと読むのが辛いのなら、持ち運びを考えて15.6インチを買った方がよかった、となってしまいます。でも、15.6インチで150%表示がかなり無理があって、17インチなら常用可能という事なら、やっぱり17インチが正解という事になります。何人かの人に聞いたりもしたのですが、やっぱり人それぞれなんですよね。
今使っているPCは14.0インチで解像度が1600×900です。これより文字サイズが多少小さくなっても大丈夫です。今のPCで表示した文字が、他のディスプレイで表示するとどれくらいの大きさになるかの実寸大が見たい…。
という事で、文字サイズをシミュレーションするプログラムを作ってみました。おかげでだいたいの雰囲気はつかめました。そして、せっかく作ったので、プログラムをここに掲載しておこうと思った次第です。自分用なので色々不親切ですがご了承ください。
プログラムの実装の話
最初はspanタグのフォントサイズを変更して色々なディスプレイサイズを表現していたのですが、小数点や6pt未満の極小フォントが正確に描画されませんでした。そこで、canvasにfillTextしてscaleを設定してみたところ、意図した出力になりました(もしかしたらsvgの方が良かったかもしれませんが、試していません)。
2016/10/09 追記
オフィスに増えたディスプレイ（U3415W、EV2730Q、BL2420PT）のサイズを追加。