ここへジャンプ:

概要

垂直スクロールバー(表示されている場合)を含む、ブラウザウィンドウの ビューポート (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.resizeBywindow.resizeTo  を見てください。

関連参照

window.outerWidthwindow.innerHeightwindow.outerHeight も参照してください。

(訳注 ウインドウ内のサイズに関しては以下も参考になるかと思います。

  • document.documentElement.clientWidth
  • document.documentElement.clientHeight

)

仕様

仕様 ステータス 備考
CSS Object Model (CSSOM) View Module
window.innerWidth の定義
草案 初期定義

ブラウザ互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特徴 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.

ドキュメントのタグと貢献者

 このページの貢献者: naturallucky, sounisi5011, teoli, khalid32, ethertank, Mgjbot, Potappo
 最終更新者: naturallucky,