このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Window: innerWidth プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
Window の innerWidth プロパティは読み取り専用で、ウィンドウの内部の幅をピクセル単位で返します。これには垂直スクロールバーがある場合、その幅を含みます。
もっと詳細に言えば、innerWidth の値はウィンドウのレイアウトビューポートの幅から取られます。ウィンドウの内部の高さは innerHeight プロパティを使用して取ることができます。
値
整数値で、ウィンドウのレイアウトビューポートの幅をピクセル単位で示します。このプロパティは読み取り専用で、既定値はありません。
ウィンドウの幅を変更するには、 Window の寸法の変更メソッドのうちの一つ、例えば resizeBy() や resizeTo() などを呼び出してください。
使用上の注意
ウィンドウからスクロールバーや境界を引いた幅を取得するには、ルートの <html> 要素の clientWidth プロパティを代わりに使用してください。
innerWidth はすべてのウィンドウと、ウィンドウのように動作するすべてのオブジェクト、例えばタブやフレームで利用できます。
例
js
// これはビューポートの幅を返す
console.log(window.innerWidth);
// これはフレームセット内のフレームビューポートの幅を返す
console.log(self.innerWidth);
// これは直近のフレームセットのビューポートの幅を返す
console.log(parent.innerWidth);
// これはもっとも外側のフレームセットのビューポートの幅を返す
console.log(top.innerWidth);
デモ
HTML
html
<p>
<code>resize</code>
イベントを発行させるためにブラウザーのウィンドウの大きさを変えてください。
</p>
<p>ウィンドウの幅: <span id="width"></span></p>
<p>ウィンドウの高さ: <span id="height"></span></p>
JavaScript
js
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");
function updateSize() {
heightOutput.textContent = window.innerHeight;
widthOutput.textContent = window.innerWidth;
}
updateSize();
window.addEventListener("resize", updateSize);
結果
[フレーム]
別なページでこのデモコードの結果を見ることができます。
仕様書
| 仕様書 |
|---|
| CSSOM View Module # dom-window-innerwidth |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。