프론트 개발 블로그

window.visualViewport.width, window.visualViewport.height 본문

Javascript

window.visualViewport.width, window.visualViewport.height

maybe.b50 2022. 1. 11. 11:13

window.visualViewport

 

window의 인터페이스의 visualViewport 읽기 전용 속성은 창의 시각적 뷰포트를 나타내는 visualViewport 객체를 반환한다.

 

Chrome 61, Edge 79, Safari 48 이상 브라우저에서 호환 가능하다. 

* IE 는 No support

 

// 예시 코드 

function viewportResize() {

	const vh = window.visualViewport.height;
	const document = document.documentElement;

	document.style.setProperty('-vh', `${vh}px`);

}

 

https://developer.mozilla.org/en-US/docs/Web/API/Window/visualViewport

반응형