32

現在、Web サイトでのモバイル デバイス検出に JavaScript を使用しています。これにより、モバイル ユーザーまたはデスクトップ ユーザーにさまざまなコンテンツを提供できます。

現在、私はwindow.devicePixelRatioandを使用screen.widthして、ユーザーがモバイル デバイスを使用しているかどうかを判断します。

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

768pxはモバイルまたはデスクトップを定義するポイントであるため、767 以下はモバイル、768 以上はデスクトップです。

これは完全に機能しますが、最近、Firefox で問題が発生しました。Firefox をズームインおよびズームアウトすると、 が変更されますwindow.devicePixelRatio。

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

Firefox でブラウザをズームインしているユーザーはサイトのモバイル バージョンを取得するため、これが問題になります。

デスクトップブラウザとは別のピクセル密度を取得する別の方法またはより良い方法を誰かが知っているかどうか疑問に思っていました.

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

誰かがこれについて何かアイデアを持っていて、それを助けることができれば、それは素晴らしいことです.

アップデート：

私はちょうどこれに出くわしました：

window.screen.availWidth / document.documentElement.clientWidth

この簡単な数学は、この投稿で提案されています。

window.devicePixelRatio は IE 10 Mobile で機能しませんか?

私はそれをテストし、Firefoxで動作し、問題を解決しましたが、残念ながらChromeで問題が発生するようになりました:

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

すべてに有効な確実な解決策を見つけることができないようです。

4

2 に答える 2

24

<meta name="viewport" content="width=device-width"/>または機能を介して製造元のヒントを活用する必要があり@-ms-viewport {width:device-width}ます。これは基本的に、デバイス メーカーが画面のピクセル密度を考慮して最適と考えるデフォルトのズームを公開します。それを行った後、呼び出すwindow.innerWidthと、ピクセル密度の測定に依存せずに、元の方程式が意図していたものが得られます。

window.devicePixelRatio何かに依存することは避けてください。その意味とそれが返す値は現在流動的な状態にあり、それに基づいて現在作成しているものは、すぐに壊れる可能性があります。

注: メタ ビューポートは、Android、iOS、および Windows Phone 8@-ms-viewportでのみ機能します。IE10 Metro でのみ (適切に) 機能し、Windows Phone 8 での適切なメタ ビューポートの動作を妨げる可能性があります。

于 2013-07-03T22:52:05.100 に答える