11

javascriptで実際のPPI（1インチあたりのピクセル数）デバイスの解像度を取得するにはどうすればよいですか?

デバイスと期待される値の例:

  • iMac 27インチ：109ppi
  • iPad: 132ppi
  • 19 インチ 1440x900 画面: 89ppi
  • ...
4

4 に答える 4

8

オペレーティング システム上で直接ネイティブ アプリケーションを実行することが、EDID に保存されているクライアント モニターの物理的特性を取得する唯一の確実な方法です。現在、Web API を介してこの情報を提供する主流のブラウザー エンジンはなく、近い将来には提供されなくなる可能性があります。ただし、さまざまなレベルの精度で密度を近似する方法がいくつかあります。

最新のブラウザーはすべて、devicePixelRatio、deviceXDPI などの属性を介してピクセル密度のヒントを提供します。これは基本的に、クライアントがどれだけズームしているかを示します (1.0x オペレーティング システムのデフォルト ズームに対して)。Apple ラインのような少数のデバイスのみをターゲットにしている場合は、どれがどれであるかを見分けることができるかもしれませんが、Apple は iPad mini と通常の iPad を区別するための手がかりを残していません.

もう 1 つの方法は、クライアントの「ユーザー エージェント文字列」を分析するデバイス データベースまたは独自のソフトウェアを使用して、デバイスのヒット/ミスを推測し、そのデバイスに関連付けられている DPI が大きなデータベースに存在する場合はそれを検索することです。高価な専用システムは、複雑なデータ マイニング アルゴリズムを活用することで精度が向上する可能性がありますが、このようなシステムに関係なく、常に手動で更新する必要があり、ユーザー エージェント文字列 (「この Web サイトをデスクトップ モードで表示する」 )

この情報が入手できないのは本当に残念な状況です。私は数え切れないほどの時間を費やして、PPI 対応の Web アプリケーションを作成するためのあらゆる方法を調査してきました。

いつの日か、誰かが WebKit、Mozilla、または Microsoft の人々を説得して、拡張現実などのための PPI 対応の Web アプリを作成できるようにすることができるようになるでしょう... ため息

于 2014-04-17T08:56:46.947 に答える
0

固定高さの要素を作成し、1inその高さをピクセル単位で確認できます

createDpiTestElements()
var dpi = getDpi()

なぜなら

[dpi] = [px/in]

だからさせて

  • pピクセル単位のオブジェクトの長さ [px]
  • iそのオブジェクトの長さをインチ [in] にする
  • そのオブジェクトの検索さdれた DPI/PPI (ピクセル/インチ [dpi])

我々が得る

d = p/i

だから私たちが選ぶなら

i = 1

我々が得る

d = p

JS コード

/**
 * @function
 * @inner
 */
function createDpiTestElements () {
  var getDpiHtmlStyle = 'data-dpi-test { height: 1in; left: -100%; position: absolute; top: -100%; width: 1in; }'

  var head = document.getElementsByTagName('head')[0]
  var getDPIElement = document.createElement('style')
  getDPIElement.setAttribute('type', 'text/css')
  getDPIElement.setAttribute('rel', 'stylesheet')
  getDPIElement.innerHTML = getDpiHtmlStyle
  head.appendChild(getDPIElement)

  var body = document.getElementsByTagName('body')[0]
  var dpiTestElement = document.createElement('data-dpi-test')
  dpiTestElement.setAttribute('id', 'dpi-test')
  body.appendChild(dpiTestElement)
}

/**
 * Evaluate the DPI of the device's screen (pixels per inche).
 * It creates and inpect a dedicated and hidden `data-dpi-test` DOM element to
 * deduct the screen DPI.
 * @method
 * @static
 * @returns {number} - The current screen DPI, so in pixels per inch.
 */
function getDpi () {
  return document.getElementById('dpi-test').offsetHeight
}
于 2016-09-24T17:59:51.897 に答える
-2

これが私にとってうまくいくものです（ただし、携帯電話ではテストしていません）：

次に、.js を入れます: screenPPI = document.getElementById('ppitest').offsetWidth;

これで 96 になりました。これは私のシステムの ppi に相当します。

于 2015-06-18T22:18:55.703 に答える