☰

JavaScriptでデバイスの幅を取得する 質問する

tag-icon • tag-icon javascript css media-queries
JavaScriptでデバイスの幅を取得する 質問する

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

CSSメディアクエリはこれを提供する。

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

そして

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

これは、横向きのスマートフォンをターゲットにする場合に便利です。たとえば、iOS では、 の宣言により、max-width:640pxiPhone 4 でも横向きモードと縦向きモードの両方がターゲットになります。私の知る限り、Android ではそうではありません。そのため、このインスタンスで device-width を使用すると、デスクトップ デバイスをターゲットにすることなく、両方の向きをターゲットにすることができます。

しかしデバイスの幅に基づいてJavaScriptバインディングを呼び出す場合、ビューポートの幅のテストに限定されるようです。つまり、次のような追加のテストが必要になります。

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

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

ベストアンサー1

プロパティを介してデバイスの画面幅を取得できますscreen.width。ウィンドウ サイズがデバイスの画面サイズよりも小さいことが多いデスクトップ ブラウザーを扱う場合は、画面幅の代わりに (モバイル デバイスでは通常見られない) を使用window.innerWidthすると便利な場合もあります。

通常、モバイル デバイスとデスクトップ ブラウザーの両方を扱う場合は、次のものを使用します。

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

おすすめ記事