브라우저 크기 조절 시 화면에 출력
window.screen → 모니터 사이즈
window.outer → 페이지를 넘어서 브라우저에 있는 URL, 탭 포함 브라우저 사이즈
window.inner → 브라우저 내 컨텐츠(스크롤바 포함)
documentElement.clientWidth → 현재 문서 사이즈(스크롤바 제외)
window.addEventListener("resize",); 이용하면 아래와 같은 것들을 가져올 수 있다.
window.screen.width, window.screen.height
window.outerWidth, window.outerHeight
window.innerWidth, window.innerHeight
document.documentElement.clientWidth, document.documentElement.clientHeight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Size</title>
<style>
.tag {
display: inline-block;
background-color: thistle;
padding: 16px;
margin-top: 16px;
font-size: 48px;
}
</style>
</head>
<body>
<div class="tag">window.screen</div>
<script>
const tag = document.querySelector('.tag');
function updateTag() {
tag.innerHTML = `window.screen:${window.screen.width}, ${window.screen.height} </br>
window.outer:${window.outerWidth}, ${window.outerHeight} </br>
window.inner:${window.innerWidth}, ${window.innerHeight} </br>
documentElement.clientWidth:${document.documentElement.clientWidth}, ${document.documentElement.clientHeight}`;
}
updateTag();
window.addEventListener("resize", () => {
updateTag();
});
</script>
</body>
</html>
'웹 개발 > 바닐라js' 카테고리의 다른 글
| [따라만들기] carouse slider (0) | 2022.02.20 |
|---|---|
| [드림코딩] 클릭 후 좌표 가져오기 (0) | 2021.09.21 |
| [노마드코더] 바닐라JS 챌린지 - 랜덤 그라데이션 백그라운드 (0) | 2021.09.02 |
| [노마드코더] 바닐라JS 챌린지 - 크리스마스 이브 D-day 계산기 (0) | 2021.09.02 |
| [노마드코더] 바닐라JS 챌린지 - 숫자 입력 게임 (0) | 2021.08.31 |
[드림코딩] 윈도우 사이즈 가져오기