ジャンプ先:

概要

垂直スクロールバー(表示されている場合)を含む、ブラウザウィンドウの ビューポート (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 の定義
草案 初期定義

ブラウザ互換性

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

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