JavaScriptでの幅取得

Javascriptで横幅、縦幅を取得する方法と、その違いについてメモ。
この記事では横幅だけ書いていますが、縦幅でも考えは同じです。

console.log(window.outerWidth);
console.log(window.innerWidth);
console.log(document.documentElement.clientWidth);

// 1828
// 1229
// 1229

Macでコンソールログを開いた時に上記の数値が表示されました。
window.outerWidthはブラウザ自身の幅
window.outerWidthはそのブラウザにコンテンツが表示される幅
window.outerWidthはそのブラウザにコンテンツが表示される幅 - スクロールバーの横幅を引いた時の幅となっています。
最初innerWidthを使用して開発していました。Mac環境で開発しているので、Windows環境で動作させた時に、動作が違ってました。

参考