Window.innerWidth

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

읽기 전용인 Window 속성 innerWidth 은 픽셀로 창 내부의 너비를 반환합니다. 하나가 존재하는 경우, 수직 스크롤 막대의 너비를 포함합니다.

더 정확하게는, innerWidth은 창의 layout viewport의 너비를 반환합니다. 창 내부의 높이, 레이아웃 뷰포트의 높이는 innerHeight 속성으로부터 얻을 수 있습니다.

창의 레이아웃 뷰포트 너비를 픽셀로 나타낸 정수 값입니다. 속성은 읽기 전용이며, 기본 값이 없습니다.

창의 너비를 변경하려면, 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>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></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);

결과

명세서

Specification
CSSOM View Module
# dom-window-innerwidth

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
innerWidth

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

같이 보기