web-dev-qa-db-ja.com

JavaScriptを使用して画面表示のDPI設定にアクセスする方法

Javascript関数で画面表示のDPI設定にアクセスする方法はありますか？

ページにHTMLパネルを配置しようとしていますが、ユーザーのDPIが大きい（120）に設定されている場合、その位置は無効になります。それに応じて位置を調整できるように、DPIが何であるかを知る必要があります。

javascriptdpidisplay-dpi
48
Yttrium

まず、DPI（dots per inch）という用語との（および非常に一般的な）混乱の可能性を支援するために：

DPIは、「表示設定」の一部ではありません。 2つの異なるコンテキストで（誤）使用されます。

  1. ディスプレイ（またはビデオ）の1インチあたりのネイティブピクセル。ピクセルの大きさを決定します。 14インチのラップトップ画面と17インチのLCDモニターの両方で同じ1024x768の解像度を使用できます。前者はおおよそ1280/14 = 91 DPIで、後者はおおよそ1280/17です= 75 DPI。画面のDPIは不変であり、ディスプレイ設定で変更することはできません その他...
  2. 印刷中に紙に塗られる1インチあたりのドット数。これは、プリンター/コピー機/ファックス機が1インチの用紙内に印刷できるサイドバイサイドドットの数です。ほとんどのプリンターは、各ドットを2つ、4つなどのドットとして印刷するだけで、より低いDPIで印刷するように設定できます。 その他...

画像を印刷するとき、紙上の画像の最終的な寸法に影響する多くのことがあります：

  • ソース画像の寸法-これはピクセルまたはデータの量です。
  • ソースイメージのDPI。この値は、画像を印刷するときに寸法を解釈する方法を決定します。
  • ソース画像にDPI情報が埋め込まれていない場合（JPEGにはDPI情報を含めることができ、GIFにはない）、使用されているプログラムにDPIを指定する設定がある場合があります。これは、イメージビューアー/エディター、またはWebブラウザーである場合があります。
  • 通常、印刷ダイアログで指定されるズーム率。
  • プリンターの現在のDPI設定。
  • プリンターの物理（最大）DPI。

一番下の行は、印刷する画像は、印刷プロセスで使用される最終的なDPIに一致するように効果的にリサンプリング（縮小または拡大）されます。関係者のいずれかがこれを引き起こしている可能性があります（プログラム、プリンタードライバー、プリンター）。

さて、質問に戻りましょう。いいえ、画面のDPIはソフトウェアドメインにないため、判断できません。これはハードウェアドメインの用語で、ユーザーが購入できるモニターの大きさを表します。 更新：2009年に最初にこの回答を書きましたが、現在の技術を理解しています。 @thureが指摘したように、（2012年以降）これで window.matchMedia 関数を使用して画面のDPIを決定できます。

他の人が示唆しているように、HTMLレイアウトの印刷の精度を達成しようとしている場合、CSSはpxではなくem、pt、またはpcなどの印刷寸法を使用する必要があります。ただし、最終的な結果は、使用しているブラウザーによって異なります。 HTMLをPDF（またはPDFゼロから生成）に変換することがオプションである場合、PDF画面と紙の両方で真のWYSIWYGを提供します。

36
Ates Goral

IEで「スクリーン」DOMオブジェクトを使用できるように見えます。このオブジェクトは、deviceXDPI、deviceYDPI、logicalXDPI、logicalYDPIのプロパティを取得しています。

https://www.w3schools.com/jsref/obj_screen.asp

http://www.webdeveloper.com/forum/showthread.php?t=175278 からの解決策は次のとおりです。ピクセル単位で測定します！

HTML：

<div id="dpi"></div>

スタイル：

#dpi {
  height: 1in;
  left: -100%;
  position: absolute;
  top: -100%;
  width: 1in;
}

Javascript：

function getDPI() {
  return document.getElementById("dpi").offsetHeight;
}
39
Ryan

window.devicePixelRatio プロパティは、画面/ページのスケーリング比を取得します。これは現在のIE、Edge、Chromeおよびデスクトップ（Windows）上のFirefoxではうまく機能しますが、現在の標準ではないようです。従来のデスクトップPCでは1を返しますモニターと200％スケーリングのSurface上の2値は最近1.0〜3.0の範囲である必要があります。これを使用して、動的画像の配信サイズを修正し、高解像度の画面でより鮮明な画像を提供できます。

論理的なdpi/ppiが必要な場合は、その値に96を掛けます。ただし、実際の物理的なppiではなく、OSが処理するものだけです。

17
ygoe

私が知っている方法はありませんが、代替ソリューションになる可能性があります。

画面の相対的なメトリックである「pt」と「em」で測定値を指定します。

http://www.w3schools.com/cssref/css_units.asp

https://css-tricks.com/the-lengths-of-css/

  • em：
    1emは現在のフォントサイズと同じです。 2emは、現在のフォントの2倍のサイズを意味します。たとえば、要素が12 ptのフォントで表示される場合、'2em'は24 ptです。 'em'は、読者が使用するフォントに自動的に適応できるため、CSSで非常に便利なユニットです
  • pt：
    ポイント（1 ptは1/72 inchと同じです）
  • pc：
    pica（1 pcは12 pointsと同じです）
4
Kent Fredric