148

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

私が言えるように、CSSメディアクエリはこれを提供します

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

と

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

これは、横向きのスマートフォンをターゲットにしている場合に便利です。たとえば、iOS の max-width:640pxwill の宣言は、iPhone 4 でもランドスケープ モードとポートレート モードの両方をターゲットにします。私が知る限り、これは Android には当てはまりません。デスクトップ デバイスをターゲットにせずに。

ただし、デバイス幅に基づいて JavaScript バインディングを呼び出している場合、ビューポート幅のテストに限定されているように見えます。これは、次のような追加のテストを意味します。

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

デバイス幅が css で利用可能であるというヒントを考えると、これは私にはエレガントに思えません。

4

12 に答える 12

242

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

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

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
于 2011-07-27T19:46:18.320 に答える
66

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

于 2012-12-07T00:28:26.440 に答える
14

私はちょうどこのアイデアを思いついたので、近視眼的かもしれませんが、うまく機能しているようで、CSS と JS の間で最も一貫している可能性があります。

CSS で、@media screen 値に基づいて html の max-width 値を設定します。

@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 メディア クエリを使用すると、この要素のコンテンツ プロパティが変更されます。たとえば、「ラージ」や「モバイル」などです (基本的なメディア クエリのアプローチは上記と同じですが、「max-width」の代わりに css の「content」プロパティを設定します)。
  3. js または jquery (jquery など$('#breakpoint-indicator').css('content');) を使用して css コンテンツ プロパティ値を取得します。これは、メディア クエリによって設定されたコンテンツ プロパティに応じて、「ラージ」または「モバイル」などを返します。
  4. 現在の値に基づいて行動します。

@include respond-to(xs)sass:や js など、sass と同じブレークポイント名を使用できるようになりましif ($breakpoint = "xs) {}た。

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

于 2013-02-18T17:16:43.390 に答える
9

使用する必要があります

document.documentElement.clientWidth

これはクロスブラウザー互換性と見なされ、jQuery(window).width(); と同じメソッドです。使用します。

詳細については、https ://ryanve.com/lab/dimensions/ をご覧ください。

于 2019-11-05T14:16:07.903 に答える
8

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

これは、ほとんどのシナリオを処理する必要があります。

于 2018-02-19T15:23:24.253 に答える
3

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;
于 2015-07-13T10:08:08.847 に答える
3

Bootstrap がレスポンシブ ブレークポイントを設定するために使用する方法に基づいて、次の関数は画面幅に基づいて xs、sm、md、lg、または xl を返します。

console.log(breakpoint());

function breakpoint() {
    let breakpoints = {
        '(min-width: 1200px)': 'xl',
        '(min-width: 992px) and (max-width: 1199.98px)': 'lg',
        '(min-width: 768px) and (max-width: 991.98px)': 'md',
        '(min-width: 576px) and (max-width: 767.98px)': 'sm',
        '(max-width: 575.98px)': 'xs',
    }

    for (let media in breakpoints) {
        if (window.matchMedia(media).matches) {
            return breakpoints[media];
        }
    }

    return null;
}

于 2020-08-15T18:21:56.190 に答える