web-dev-qa-db-ja.com

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で利用可能であるというヒントを考えると、これは私にはエレガントに見えません。

javascriptcssmedia-queries
107
Nicholas Evans

Screen.widthプロパティでデバイスの画面幅を取得できます。
。

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

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

ブライアンリーガーの有用な答えの1つの問題は、高密度ディスプレイでは、Appleデバイスがscreen.widthをディップで報告するのに対し、Androidデバイスは物理ピクセルで報告することです。 （ http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html を参照してください。）matchMediaをサポートするブラウザーでif (window.matchMedia('(max-device-width: 960px)').matches) {}を使用することをお勧めします。

50
user69173

私はちょうどこの考えを持っていたので、近視眼的かもしれませんが、それはうまくいくようで、CSSとJSの間で最も一貫しているかもしれません。

CSSで、@ media画面の値に基づいてhtmlの最大幅の値を設定します。

@media screen and (max-width: 480px) and (orientation: portrait){

    html { 
        max-width: 480px;
    }

    ... more styles for max-width 480px screens go here

}

次に、JSを使用して（おそらくJQueryのようなフレームワークを介して）、htmlタグのmax-width値を確認します。

maxwidth = $('html').css('max-width');

これで、この値を使用して条件付き変更を行うことができます。

If (maxwidth == '480px') { do something }

Htmlタグにmax-width値を設定するのが恐ろしい場合は、別のタグ、この目的にのみ使用されるタグを設定することができます。私の目的では、htmlタグは正常に機能し、マークアップには影響しません。

Sassなどを使用している場合に便利：px値の代わりに、ブレークポイント名などのより抽象的な値を返すには、次のようなことができます。

  1. ブレークポイント名を保存する要素を作成します。 <div id="breakpoint-indicator" />
  2. CSSメディアクエリを使用すると、この要素のコンテンツプロパティが変更されます。 g。 「大」または「モバイル」など（上記と同じ基本的なメディアクエリアプローチですが、「max-width」ではなくcss「content」プロパティを設定します）。
  3. Jsまたはjquery（jquery e.g. $('#breakpoint-indicator').css('content');）を使用してcssコンテンツプロパティ値を取得します。これは、メディアクエリによって設定されたコンテンツプロパティに応じて「大」、「モバイル」などを返します。
  4. 現在の値に基づいて行動します。

これで、sassで行うのと同じブレークポイント名で動作できます。 sass：@include respond-to(xs)、およびjs if ($breakpoint = "xs) {}。

私が特に気に入っているのは、ブレークポイント名をすべてcssと1か所（変数scssドキュメントのように）で定義でき、jsがそれらに独立して動作できることです。

12
RogerRoger

window.devicePixelRatioを使用するほうがwindow.matchMediaソリューションよりもエレガントだと思います。

if (window.innerWidth*window.devicePixelRatio <= 960 
    && window.innerHeight*window.devicePixelRatio <= 640) { 
    ... 
}
4
maxime schoeni

var width = Math.max(window.screen.width, window.innerWidth);

これはほとんどのシナリオを処理するはずです。

3
ZNS

それを確認してください

const mq = window.matchMedia( "(min-width: 500px)" );

if (mq.matches) {
  // window width is at least 500px
} else {
  // window width is less than 500px
}

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

2
MEAbid

Lumia電話は間違ったscreen.widthを提供します（少なくともエミュレーターでは）。だから多分Math.min(window.innerWidth || Infinity, screen.width)はすべてのデバイスで動作しますか？

または何かおかしい：

for (var i = 100; !window.matchMedia('(max-device-width: ' + i + 'px)').matches; i++) {}
var deviceWidth = i;
2
Munawwar

簡単に使用できます

document.documentElement.clientWidth

1
Re Undo