실제적으로 보여지는 document 사이즈 측정시 자주 사용되는 api
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webAPIs_screen</title>
<style>
.tag {
display: inline-block;
background-color: thistle;
padding: 16px;
margin-top: 16px;
font-size: 48px;
}
</style>
</head>
<body>
<div class="tag">Window Size</div>
<script>
const tag = document.querySelector(".tag");
/* window.screen : 컴퓨터 자체의 해상도 */
/* window.outer : 브라우저(상단바, 스크롤 가능 범위 모두 포함) */
/* window.inner : 브라우저(상단바 제외, 스크롤 가능 범위 포함) */
/* documentElement.client : 브라우저(상단바 제외, 순수 보이는 스크린)*/
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.client : ${document.documentElement.clientWidth}, ${document.documentElement.clientHeight} <br />
`;
}
window.addEventListener("resize", () => {
updateTag();
});
updateTag();// 브라우저가 로드되자마자 사이즈가 측정될 수 있도록
</script>
</body>
</html>
