[解決済み] javascriptでデバイスの幅を取得する

質問

javascriptを使用して、ビューポート幅ではなく、ユーザーのデバイス幅を取得する方法はありますか？

CSSメディアクエリは、私が言えることは、これを提供しています。

@media screen and (max-width:640px) {
    /* ... */
}

そして

@media screen and (max-device-width:960px) {
    /* ... */
}

これは、横向きのスマートフォンをターゲットにしている場合に有効ですね。例えば、iOSでは max-width:640px は、iPhone 4 でもランドスケープモードとポートレートモードの両方をターゲットにします。Androidの場合はそうではないので、この例ではdevice-widthを使用することで、デスクトップデバイスをターゲットにすることなく、両方の方向をターゲットにすることに成功しています。

しかし デバイスの幅に基づいてjavascriptのバインディングを呼び出している場合、私はビューポート幅のテストに制限されているように見える、これは次のように余分なテストを意味します。

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

デバイスの幅がcssで利用できるというヒントを考えると、これはエレガントではないように思えます。

どうすればいい？

デバイスの画面幅を取得するには screen.width プロパティを使用します。 また、時には window.innerWidth (モバイル機器では一般的に見られません）、ウィンドウサイズが機器の画面サイズより小さいことが多いデスクトップ・ブラウザを扱う場合は、画面幅のかわりに

一般的に、モバイル機器とデスクトップ・ブラウザーの両方を扱う場合は、次のようにします。

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;