概要
垂直スクロールバー(表示されている場合)を含む、ブラウザウィンドウの ビューポート (viewport) の幅(ピクセル)を返します。
Note: もし nsIDOMWindowUtils.setCSSViewport()
をページレイアウト目的で、 virtual window size をセットするために使うと、 そのメソッドを使ってviewport幅に応じた値が返ります。
構文
var intViewportWidth = window.innerWidth;
戻り値
intViewportWidth は、window.innerWidth プロパティの値を保持します。
window.innerWidth プロパティは、読みこみ専用です。また、デフォルトの値はありません。
window.innerWidth プロパティは、ピクセル数を表す整数を保持します(訳注:現英語版には未記載)。
注記
innerWidth プロパティは、サイドバーを含みません。ですから、サイドバーが展開されたとき、innerWidth プロパティの値は、減少します。
innerWidth プロパティは、ウィンドウ、フレーム、フレームセット、もしくは、副ウィンドウのような、あらゆるウィンドウオブジェクトでサポートされます。
垂直バーがあった時に取り除くアルゴリズムはこちら:algorithm
例
フレームセットを考えてください
---------------------
var intFrameWidth = window.innerWidth; /* ビューポートの幅を返します */ var intFrameWidth = self.innerWidth; /* フレームセット内の フレームの ビューポートの幅を返します */ var intFramesetWidth = parent.innerWidth; /* 最も近いフレームセットのビューポートの幅を返します。 */ var intOuterFramesetWidth = top.innerWidth; /* 最も離れたフレームセットのビューポートの幅を返します。 */
xxx To do: ここにインタラクティブなデモへのリンク xxx
windowサイズを変えるには、 window.resizeBy
と window.resizeTo
を見てください。
関連参照
window.outerWidth、window.innerHeight、window.outerHeight も参照してください。
(訳注 ウインドウ内のサイズに関しては以下も参考になるかと思います。
- document.documentElement.clientWidth
- document.documentElement.clientHeight
)
仕様
仕様 | ステータス | 備考 |
---|---|---|
CSS Object Model (CSSOM) View Module window.innerWidth の定義 |
草案 | 初期定義 |
ブラウザ互換性
特徴 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | (有) | 1.0 (1.7 or earlier)[1] | 9 | 9 | 3 |
特徴 | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 1 | (有) | 1.0 (1.0)[1] | 9 | 9 | 3 |
[1] Firefox 4 ~ 24のある状況下でバグがあり、誤った値を返します。 参照: バグ 641188.