web-dev-qa-db-ja.com

レスポンシブWebデザインの画面サイズを検出するにはどうすればよいですか？

私はこれをググって、あなたの画面サイズを与える quirksmode site を得ました。コンソールを引き上げるとscreen.widthおよびscreen.heightは、ウィンドウオブジェクトから直接使用できます。

開始するには、純粋なJavaScriptで検出を行いたいです。このプロパティをすべてのデバイスとブラウザ（モバイル、タブレット、PC、Chrome、Safari、IE、Firefox）で使用できますか？.

サイズ変更などでビューポートが変わってもかまいません。画面の実際のサイズは変わりません。

デバイスやブラウザを問わず確認できるプロパティが1つあることを期待していました。

ここにいくつかの一般的な情報があります レスポンシブウェブデザインのウィキペディア

javascriptcssresponsive-design
9
Zen-Lee Chai

screen.widthは、探しているプロパティです。

6
user2258887

JavaScriptでデバイスの幅を取得する を見てください

メディアクエリもjsで機能します。

if (window.matchMedia('screen and (max-width: 768px)').matches) {}

別の方法は：

var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
27
l0w_skilled

これは長い間、私にとってはうまくいきました。以下のこれらの属性は、新しいタブサイズに基づくレスポンシブサイズを提供します。

window.innerWidth
window.innerHeight
0
Karthik Sagar