web-dev-qa-db-ja.com

スクロールバーを含むブラウザウィンドウの幅を取得する

$(window).width();でブラウザのウィンドウ幅を取得しようとしました。 IE 10の場合、ブラウザの全幅が返され、スクロールバーが含まれます。ただし、FirefoxとChromeでは、どちらもスクロールバーなしの値が返されます。

スクロールバーと一緒にブラウザーの幅を含めるにはどうすればよいですか？検出された幅がCSSとまったく同じである必要があるためです。

ありがとう。

javascriptjquerygoogle-chromefirefox
26
user1995781

これにより、ウィンドウの幅全体が取得されます。

_ window.outerWidth
_

注： jQueryのouterWidth()は$(window)では機能しません

24
infidel

最初の答えは近いものでしたが、さらに詳しく調べると、少し複雑になります。 body.clientWidthは、スクロールバーを除いた幅です。 window.outerWidthは、スクロールバーとウィンドウの境界線などの他のウィンドウ要素を含む幅です。 window.innerWidthは、スクロールバーを含み、ウィンドウの境界を含まない、ウィンドウの実際の幅です。

enter image description here

51
Jamie Thomas

window.innerWidthレスポンシブデザインに必要な場合は正解のようです

14
minlare

window.innerWidthは、HTMLの幅を示しますandスクロールバー。この値は、CSSでメディアクエリを使用するときにデバイス幅のブレークポイントに使用される値です。基本的に、window.innerWidthは計算されたCSSユニット100vwと同じです。ただし、window.outerWidthはウィンドウ全体の幅を示します。

たとえば、ChromeのDev Toolsをブラウザで開いた場合insideの場合、window.outerWidthはWebページの幅+スクロールバー+ ChromeのDev Toolsインスペクターになります。 window.innerWidthは、Webページ+スクロールバーのみの幅を返します。

0
Caleb Runion