57

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

ページに HTML パネルを配置しようとしていますが、ユーザーの DPI が大きく (120) に設定されていると、位置がずれてしまいます。それに応じて位置を調整できるように、DPI を知る必要があります。

4

4 に答える 4

48

deviceXDPI、deviceYDPI、logicalXDPI、logicalYDPI のプロパティを取得した IE で「画面」DOM オブジェクトを使用できるようです。

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

http://www.webdeveloper.com/forum/showthread.php?t=175278の解決策を次に示します (試したことはありませんが、完全なハックのようです :) 1 インチ幅のものを作成し、ピクセル単位で測定してください。

console.log(document.getElementById("dpi").offsetHeight);
#dpi {
    height: 1in;
    left: -100%;
    position: absolute;
    top: -100%;
    width: 1in;
}
<div id="dpi"></div>

于 2009-05-08T08:14:44.013 に答える
35

まず、DPI (ドット/インチ) という用語との混同の可能性がある (そして非常に一般的な) 混乱を避けるために、次のように説明します。

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 には含まれますが、GIF には含まれません)、使用しているプログラムに DPI を指定する設定がある可能性があります。これは、画像ビューアー/エディターまたは Web ブラウザーである可能性があります。
  • 通常、印刷ダイアログで指定されるズーム率。
  • プリンターの現在の DPI 設定。
  • プリンターの物理 (最大) DPI。

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

さて、あなたの質問に戻ります。いいえ、ソフトウェア ドメインにないため、画面の DPI を特定することはできません。これはハードウェアのドメイン用語であり、ユーザーが購入できるモニタのサイズを表します。 更新:この回答は、現在のテクノロジを理解した上で、2009 年に最初に書きました。@thure が指摘したように、(2012 年以降?) window.matchMedia関数を使用して画面の DPI を決定できるようになりました。

他の人が示唆しているように、HTML レイアウトを正確に印刷しようとしている場合は、CSS で px ではなく em、pt、pc などの印刷サイズを使用する必要があります。ただし、最終的な結果は、使用しているブラウザによって異なります。HTML を PDF に変換する (または PDF を最初から生成する) ことが選択肢の場合、PDF を印刷すると、画面と紙の両方で最も正確な WYSIWYG が得られます。

于 2009-01-25T01:59:43.697 に答える
31

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

論理的な dpi/ppi が必要な場合は、その値に 96 を掛けます。実際の物理的な ppi にはなりませんが、OS がそれをどのように扱うかだけです。

于 2016-06-02T20:51:45.133 に答える
3

私が知っている方法はありませんが、それらは代替の解決策である可能性があります。

画面の相対的な指標である「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）
于 2009-01-25T01:18:00.113 に答える