55

表示されるデバイスに応じて特定の解像度で画像を生成する必要がある、一種のユニークなアプリに取り組んでいます。そのため、通常の Windows ブラウザー (96ppi)、iPhone (163ppi)、Android G1 (180ppi)、およびその他のデバイスでは出力が異なります。これを自動的に検出する方法があるかどうか疑問に思っています。

私の最初の調査ではノーと言っているようです。私が見た唯一の提案は、幅が CSS で「1in」と指定されている要素を作成し、その offsetWidth を確認することです ( javascript を介して画面表示の DPI 設定にアクセスする方法も参照してください)。理にかなっていますが、iPhone は 96ppi だと嘘をついています。

別のアプローチは、ディスプレイの寸法をインチで取得し、ピクセル単位の幅で割ることですが、その方法もわかりません。

4

13 に答える 13

13

DOMを必要としない方法を思いつきました...まったく

DOM は面倒な場合があり、スタイルシートで何が起こっているのかを知らずに、ボディに何かを追加する必要がありwidth: x !importantます。また、DOM が使用可能になるまで待つ必要があります...

/**
 * Binary search for a max value without knowing the exact value, only that it can be under or over
 * It dose not test every number but instead looks for 1,2,4,8,16,32,64,128,96,95 to figure out that
 * you thought about #96 from 0-infinity
 *
 * @example findFirstPositive(x => matchMedia(`(max-resolution: ${x}dpi)`).matches)
 * @author Jimmy Wärting
 * @see {@link https://stackoverflow.com/a/35941703/1008999}
 * @param {function} fn       The function to run the test on (should return truthy or falsy values)
 * @param {number}   start=1  Where to start looking from
 * @param {function} _        (private)
 * @returns {number}          Intenger
 */
function findFirstPositive (f,b=1,d=(e,g,c)=>g<e?-1:0<f(c=e+g>>>1)?c==e||0>=f(c-1)?c:d(e,c-1):d(c+1,g)) {
  for (;0>=f(b);b<<=1);return d(b>>>1,b)|0
}

var dpi = findFirstPositive(x => matchMedia(`(max-resolution: ${x}dpi)`).matches)

console.log(dpi)

于 2016-03-11T13:37:35.357 に答える
11

CSS メディア クエリがありresolutionます — CSS スタイルを特定の解像度に制限することができます:

ただし、Firefox 3.5 以降、Opera 9 以降、および IE 9 でのみサポートされています。他のブラウザでは、解像度固有のスタイルはまったく適用されません (ただし、デスクトップ以外のブラウザはチェックしていません)。

于 2011-11-21T14:01:33.127 に答える
5

これが私のために働くものです（しかし携帯電話でそれをテストしませんでした）：

<body><div id="ppitest" style="width:1in;visible:hidden;padding:0px"></div></body>

次に、.jsを入力します。screenPPI = document.getElementById('ppitest').offsetWidth;

これにより、私のシステムのppiに対応する96が得られました。

于 2010-12-17T15:33:34.507 に答える
3

また、同じ画像を異なる画面 dpi で同じサイズで表示する必要がありましたが、Windows IE のみでした。私が使用した：

<img src="image.jpg" スタイル="
    高さ: 式 (スケール (438, 192));
    width:expression(scale(270, 192))" />

関数 scale(x, dpi) {

    // dpi は画像の元の寸法です
    x * screen.deviceXDPI/dpi を返します。
}

この場合、元の画像の幅/高さは 270 と 438 で、画像は 192dpi 画面で展開されています。screen.deviceXDPI は Chrome で定義されておらず、IE 以外のブラウザーをサポートするにはスケール機能を更新する必要があります。

于 2009-11-27T18:06:26.920 に答える
3 
function getPPI(){
  // create an empty element
  var div = document.createElement("div");
  // give it an absolute size of one inch
  div.style.width="1in";
  // append it to the body
  var body = document.getElementsByTagName("body")[0];
  body.appendChild(div);
  // read the computed width
  var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
  // remove it again
  body.removeChild(div);
  // and return the value
  return parseFloat(ppi);
}

(ボーダフォンより)

于 2014-02-05T12:20:42.203 に答える
2

DPI は、定義上、ディスプレイの物理的なサイズに関連付けられています。そのため、背後にあるハードウェアを正確に知らなければ、実際の DPI を取得することはできません。

最新の OS は、互換性のあるディスプレイを持つために共通の値である 96 dpi に同意しました。それは残念ですが、それは事実です。

解像度の計算に必要な実際の画面サイズを推測するには、スニッフィングに頼る必要があります (DPI = PixelSize / ScreenSize)。

于 2008-11-23T00:31:16.293 に答える
1

あなたの最善のアプローチは、「スニファー」イメージの提案をデバイスの既知の DPI のマトリックスと組み合わせることだと思います (ユーザー エージェントおよびその他の方法を介して)。それは正確ではなく、維持するのも面倒ですが、作成しようとしているアプリについて詳しく知らなくても、それが私が提供できる最良の提案です.

于 2008-11-11T01:49:04.807 に答える
0

他に何もできませんか？たとえば、カメラで認識される画像を生成している場合（つまり、プログラムを実行したり、カメラ上で携帯電話をスワイプしたりすると、魔法が起こります）、サイズに依存しないものを使用できませんか？

これが制御された環境に展開されるアプリケーションである場合、キャリブレーションユーティリティを提供できますか？（小さな定規が入った名刺を印刷するような単純なものを作成し、キャリブレーションプロセス中に使用することができます）。

于 2008-11-25T21:20:25.820 に答える
0

このリンクを見つけました: http://dpi.lv/。基本的には、クライアント デバイスの解像度、dpi、および画面サイズを検出するための Web ツールです。

コンピューターと携帯電話でアクセスしたところ、正しい解像度と DPI が表示されました。そのための github リポジトリがあるので、どのように機能するかを確認できます。

于 2014-07-27T20:07:29.430 に答える