Chrome上のAndroidの物理画面のサイズ/ dpi /ピクセル密度の取得
質問
AndroidのChromeで実際に正しい画面の物理的寸法を取得する安全な方法はありますか？必要に応じて、ChromeおよびAndroidの古いバージョンをスコープから除外できます。
先行研究
Javascript（またはcss）内からデバイスの実際の物理画面サイズを取得することについて、stackoverflowには行き止まりの質問が数多くあります。 html apiの標準化と実際のブラウザの実装との間に収束はないようです。もちろん、ブラウザの実装は、正しい情報を提供するハードウェアに依存するOS apiに依存しています。
ところで、いくつかの以前の答えは、当時普及していた特定のピクセル密度を想定するのは不可解（2011年など）であり、したがって役に立たない。 Chromeの点滅がchrome（？）のwebkitに取って代わった可能性があるのに対し、他のものはwebkitに関連しています。
AndroidでChromeのみに制限することで、シンプルなソリューションの存在を調査したいと思います。
注意
これはすべて、ブラウザー内のjavascript（またはcss）ソリューションに関するものであり、ネイティブアプリのソリューションではありません。
実際の物理的寸法または実際のDPIを実際に取得することはできません。また、できたとしても、それらを使用して何もできません。
これは非常に長く複雑な話なので、許してください。
Webおよびすべてのブラウザーは、CSSピクセルと呼ばれる単位として1pxを定義します。 CSSピクセルは実際のピクセルではなく、デバイスの表示角度に基づいて1/96インチと見なされる単位です。これは 参照ピクセル として指定されます。
基準ピクセルは、ピクセル密度が96dpiで読み取り装置からの距離が腕の長さであるデバイス上の1つのピクセルの視角です。したがって、公称腕の長さが28インチの場合、視角は約0.0213度です。したがって、腕の長さで読み取る場合、1pxは約0.26 mm（1/96インチ）に相当します。
0.26mmのスペースには、非常に多くの実際のデバイスピクセルがあります。
ブラウザは主にレガシーの理由でこれを行います-ほとんどのモニターはWebが生まれたときは96dpiでしたが、一貫性のために、「古い」800x600の15インチ画面上の22pxボタンは22pxボタンの2倍のサイズになります1600x1200の15インチモニター。この場合、画面のDPIは実際には2倍です（解像度は水平方向に2倍ですが、同じ物理スペース内にあります）。これはウェブとアプリにとって悪い状況であるため、ほとんどのオペレーティングシステムはピクセル値をデバイスに依存しないユニットに抽象化する多くの方法を考案しました（AndroidのDIPS、iOSのPT、およびCSS Pixel web）。
IPhone Safariブラウザは、ビューポートの概念を導入した最初の（私の知る限り）でした。これは、フルデスクトップスタイルのアプリケーションが小さな画面でレンダリングできるようにするために作成されました。ビューポートは、幅が960pxであると定義されました。これにより本質的にページが3倍にズームアウトされ（iphoneは元々320ピクセル）、1 CSSピクセルは物理ピクセルの1/3になりました。ビューポートを定義すると、このデバイスを1 CSSピクセル= 163dpiの実際のピクセル1つに一致させることができます。
幅が「device-width」であるビューポートを使用することにより、デバイスごとにビューポートの幅を最適なCSSピクセルサイズに設定する必要がなくなり、ブラウザーが自動的に調整します。
ダブルDPIデバイスの導入により、携帯電話メーカーはモバイルページを50％小さく表示することを望まなかったため、devicePixelRatio（モバイルWebキットで最初と思われる）と呼ばれるコンセプトを導入しました。これにより、1 CSSピクセルを約1/96インチですが、画像などのアセットは2倍のサイズにする必要があるかもしれないことを理解させてください。 iPhoneシリーズを見ると、すべてのデバイスが画面の幅を CSSピクセルは320px と言っていますが、これは真実ではありません。
したがって、CSSスペースでボタンを22ピクセルにした場合、物理画面上の表現は22 *デバイスピクセル比になります。実際にこれを言いますが、デバイスのピクセル比も決して正確ではないため、これは正確ではありません。電話メーカーは2.1329857289918ではなく2.0、3.0などのニースの数値に設定しています。
要約すると、CSSピクセルはデバイスに依存しないため、画面の物理的なサイズやディスプレイの密度などについて心配する必要はありません。
物語の教訓は次のとおりです。画面の物理的なピクセルサイズを理解することを心配しないでください。必要ありません。 50pxはすべてのモバイルデバイスでほぼ同じように見えますが、多少異なる場合がありますが、CSS Pixelは一貫したドキュメントとUIを構築するためのデバイスに依存しない方法です
リソース：
- https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport
- https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport
- http://viewportsizes.com/
- http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
- http://en.wikipedia.org/wiki/Device_independent_pixel
- http://www.w3.org/TR/css3-values/#absolute-lengths
- https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
マットの答えに基づいて、テストを行いました。
// on Macbook Pro Retina (2880x1800, 15.4"), is the calculated diagonal size
// approximately 15.4? Let's see...
var svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var screenWidthMillimeters = svgEl.screenPixelToMillimeterX * 2880;
var screenHeightMillimeters = svgEl.screenPixelToMillimeterY * 1800;
var screenDiagonalMillimeters = Math.sqrt(Math.pow(screenWidthMillimeters, 2) + Math.pow(screenHeightMillimeters, 2)); // pythagorean theorem
var screenDiagonalInches = (screenDiagonalMillimeters / 10 / 2.54); // (mm / 10mm/cm) / 2.54cm/in = in
console.log("The calculated diagonal of the screen is "+screenDiagonalInches+" inches. \nIs that close to the actual 15.4\"?");
これは出力です：
The calculated diagonal of the screen is 35.37742738560738 inches.
Is that close to the actual value of 15.4?
いや。
そのため、Webブラウザで実際の物理的な値を取得する方法はまだないようです。
任意のページ要素を作成し、実際の物理単位を使用して幅を設定できます。例えば
<div id="meter" style="width:10cm"></div>
そして、ピクセル単位で幅を取得します。たとえば、以下のHTMLコード（JQueryを使用）は、デバイスの画面幅をセンチメートルで示しています
<script>
var pixPer10CM = $('#meter').width();
var CMPerPix = 10 / pixPer10CM;
var widthCM = screen.width * CMPerPix;
alert(widthCM);
</script>
WURFLでその情報を取得できます。
属性の名前は次のとおりです。
resolution_(width|height)
physical_display_(width|height)
ロングバージョン：
これを達成するための最良かつ最も信頼できる戦略は、ブラウザーからWURFL（または別の）などのDBに必要な情報を提供できる最新のDBにuser agent stringを送信することです。
これは、すべての最新のブラウザーが提供できる情報です。デバイスとそのOSに関する情報を公開します。 WURFLのような辞書の助けなしでは、アプリケーションにとって十分な意味がありません。
これは、デバイスプロパティのdetectによく使用されるデータベースです。
これにより、市場で人気のあるデバイスのほとんどを正確にサポートできる場合があります。コードデモを投稿しますが、WURFLサイトからダウンロードできます。このようなデモは、ライブラリとともにダウンロードされるexamples/demoフォルダーにあります。
物理的なサイズと解像度の確認に関する詳細と説明は次のとおりです。 http://www.scientiamobile.com/forum/viewtopic.php?f=16&t=286
「この問題の良い解決策はありません」という答えの補足として、CSSで使用できるユニットを確認するだけです https://www.w3schools.com/cssref/css_units.asp
Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)
* Pixels (px) are relative to the viewing device.
For low-dpi devices, 1px is one device pixel (dot) of the display.
For printers and high resolution screens 1px implies multiple device pixels.
この説明ではseems解決策があります。 cm、mm、およびinは、画面サイズと解像度に関係なく、同じサイズの何かを描画するために使用されます。これを念頭に置いて、px、pt、またはpcの少なくとも1つを使用して、使用する精度に関係なくピクセルレベルで描画できることを期待できます（そうでない場合、何百万のピクセルを持つことのポイントは何ですか？ ）。うーん、ダメ。すべての単位はメートル単位の端数であるため、これらの単位はすべて異なるスケールになります。そして、物語の最悪は、これらのどれも正確ではないという事実です。 w3schoolsの例を試してみてください（20cmの線を引き、定規で測定します）。
したがって、最終的に：-物理的寸法で何かを正確に描画する方法はありません（cm、mm、in、そして最終的にはptおよびpcが該当します）。 -画面のサイズと解像度に関係なく、同じサイズの何かを描画する方法はありません（少なくともpxを使用する必要があります）。
これは、実装の問題（実際の画面サイズが使用されていない）と設計の問題（そのために既に非常に多くのユニットがあるのに、pxが画面サイズに依存しない理由）の両方です。
私は私のWebプロジェクトの1つでこの問題に取り組みました http://www.vinodiscover.com 答えは、特定の物理的なサイズは異なりますが、近似値を取得できます。 JSおよび/またはCSSを使用して、メディアクエリを使用して、ビューポート/画面の幅と高さ、およびピクセル密度を見つけることができます。たとえば、iPhone 5（326 ppi）= 320x568 x 568ピクセル、2.0ピクセル密度、Samsung Galaxy S4（441ppi）= 360px x 640px、3.0ピクセル密度。事実上、1.0ピクセル密度は約150 ppiです。
このため、ピクセル密度に関係なく、幅が284px未満の場合に1列を表示するようにCSSを設定しました。次に、284pxと568pxの間の2つの列。次に、852pxの上の3列。ブラウザがピクセル密度の計算を自動的に行うようになったため、見た目よりもはるかに簡単です。
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
CSSピクセルは、実際には「デバイスに依存しないピクセル」ではありません。 Webプラットフォームは、さまざまな種類のデバイスで構成されています。 CSSピクセルはハンドヘルドではかなり一貫しているように見えますが、通常の96dpiデスクトップモニターでは50％大きくなります。 question を参照してください。これは、場合によっては本当に悪いことではありません。目までの距離が大きいため、大きな画面ではフォントを大きくする必要があります。しかし、UI要素の寸法はかなり一貫している必要があります。アプリにトップバーがあるとします。デスクトップとモバイルで同じ厚さにしたい場合、デフォルトでは50％小さくなりますが、これは良い要素ではありません。私が見つけた唯一の回避策は、デバイスのDPIに基づいて異なるスタイルを適用することです。
Window.devicePixelRatioを使用すると、JavaScriptで画面DPIを取得できます。またはCSSクエリ：
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi)
{
/* specific styles for handhelds/ high dpi monitors*/
}
しかし、これを高dpiのデスクトップモニターでどのように機能させるかはわかりません。おそらく要素は小さすぎるでしょう。 Webプラットフォームがこれ以上良いものを提供しないのは本当に残念です。ディップの実装はそれほど難しくないと思います。
GetPPI（）関数（ モバイルWeb：物理ピクセルサイズの取得方法 ）を使用して、1インチIDを取得するには、次の式を使用します。
var ppi = getPPI();
var x = ppi * devicePixelRatio * screen.pixelDepth / 24;
$('#Cubo').width (x);
$('#Cubo').height(x);
<div id="Cubo" style="background-color:red;"></div>
あなたのコメントで、ボタンなどが視聴者に表示されるサイズに実際に関心があることに気付きました。
最初のスケールを設定するためにHTMLヘッダーにメタタグを追加するだけの問題であることが判明するまで、私は同じ問題を抱えていました。
<meta name="viewport" content="width=device-width, initial-scale=1">
WURFLを使用して解像度を検索することに関するzehelvionの返信として、WURFLが JavaScriptスニペット としても利用可能であることに言及する価値があります。
wurfl.io で提供される無料版では、画面と解像度に関する情報は得られません（デバイス名、フォームファクター、モバイル/非モバイルのみ）が、商用バージョンもあります ここで利用可能なその他の機能 。
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
幸運のダニー117