ピクセル比率/密度を検出するためのベストプラクティスは何ですか？

Question

私は現在、自分のウェブサイトでモバイルデバイスの検出にJavaScriptを使用しています。これにより、モバイルまたはデスクトップのユーザーに異なるコンテンツを提供することができます。

ので、同じよう現在、私は、モバイルデバイス上のかどうユーザーならば動作するようにwindow.devicePixelRatioとscreen.widthを使用します。

var isMobileScreenWidth = ((screen.width/window.devicePixelRatio) < 768) 

768pxは、我々は767ので、モバイルやデスクトップを定義し、以下である点ですモバイルと768以上はデスクトップです。そう、

は、これは完璧に動作しますが、私は最近、Firefoxがで、それはwindow.devicePixelRatioを変えるズームアウトのFirefox、との問題に遭遇しています

zoom = 30%, window.devicePixelRatio = 0.3 
zoom = 100%, window.devicePixelRatio = 1.0 
zoom = 300%, window.devicePixelRatio = 3.0 

これが今私に問題を引き起こす任意のユーザーがいるので、彼らのブラウザをFirefoxで拡大して、そのサイトのモバイル版を入手してください。

私はデスクトップのブラウザとは別のピクセル密度を得る方法が違っていると分かっていたのでしょうか？

私は少量のユーザーエージェントの検出も使用しますが、常に変化するモバイルユーザーエージェントのリストに追いつくために大がかりな作業であるため、画面の解像度とユーザーの両方に依存することはできません同時にエージェントとなります。

誰もがこれについてのアイデアを持っていて、それがすばらしくなるのを助けることができます。

UPDATE：

私はちょうどこの渡って来ている：

window.screen.availWidth/document.documentElement.clientWidth 

数学のこの迅速なビットは、この記事で示唆されています

window.devicePixelRatio does not work in IE 10 Mobile?

私はそれ、それをテストしていますFirefoxでうまくいき、問題を解決しましたが、残念ながらChromeで問題が発生しています：

Chrome zoom = 100%, 
window.devicePixelRatio = 1.0, 
window.screen.availWidth/document.documentElement.clientWidth = 3.0 

私はすべてのために機能する固いソリューションを見つけることができないようです。

Answer 1

<meta name="viewport" content="width=device-width"/>または@-ms-viewport {width:device-width}機能を使用して製造元のヒントを活用する必要があります。基本的には、画面のピクセル密度を考慮して、デバイスメーカが最適と考えるデフォルトのズームを表示します。あなたがそれをした後、window.innerWidthと呼ぶと、元の方程式が意図していたものの、ピクセル密度の測定に頼ることなくあなたに与えられるでしょう。

何かのためにwindow.devicePixelRatioに頼らないでください。その意味とそれが返す価値は現在フラックスの状態にあり、あなたが今それを基にして作るものは、すぐに破綻する可能性が非常に高いでしょう。

注： メタビューポートにのみIE10メトロでAndroid、iOS版、およびWindowsの携帯電話8 -ms-ビューポートのみ（適切に）動作します@上で動作し、Windows Phoneで適切なメタビューポートの動作を妨害することが8