[JavaScript] 브라우저 창 크기 고정
웹 개발을 하다보면 사용자에게 좋은 UI를 위해 브라우저 크기를 고정하고 싶을 때가 있습니다.
특히 팝업창은 만들다보면 딱 예쁜 크기가 정해져있을 때가 많습니다.
과거 글을 찾아보면 window.resizeTo를 이용해 고정하라고 나옵니다.
$(window).resize(function () {
window.resizeTo(size[0], size[1]);
});
이렇게 윈도우의 크기 조절 콜백으로 다시 크기를 복구하는 것이죠
하지만 이대로 따라해보면 chromium 기반의 브라우저에서는 동작하지 않는 것을 알 수 있습니다.
(IE에서는 잘 동작합니다!)
왜 동작하지 않을까?
요즘의 브라우저들은 대부분 chromium 기반으로 이루어져있습니다.
이 친구는 사용자 친화적인 UI/UX를 목표로 개발되었습니다.
이 사용자 친화적인 UI/UX란 개발자가 사용자에게 무언가를 강제하는 것을 지양한다는 것입니다.
그래서 chromium은 강제로 resize를 하거나 다른 탭으로 이동시키는 것이 불가능합니다.
사실 여러 웹페이지가 열려있는데 그 페이지가 크기를 제어할 수 있다면 크기가 마구 변할 수 있으니 이해도 갑니다.
그럼 어떻게 해야할까?
특정 웹페이지가 사용자의 탭 크기를 강제할 수 없다는 것은 알았습니다.
하지만 팝업창은 다릅니다!
chromium 개발진도 팝업창은 딱 예쁜 크기가 있다는 것을 알았을까요?
window.open 함수로 연 창은 크기 조절이 가능합니다.
대신 resizeable 속성을 주어야 하죠(default는 resizeable=no입니다)
popupWindow = window.open('about:blank', 'windowName', 'resizeable');
popupWindow.resizeTo(500, 500);
이제 팝업창 크기를 맘대로 컨트롤 할 수 있으니 크기를 고정해봐야겠죠?
<!DOCTYPE html>
<html>
<body>
<script>
popupWindow = window.open("about:blank", "windowName", "resizeable");
popupWindow.resizeTo(500, 500);
popupWindow.onresize = (_=>{
popupWindow.resizeTo(500,500);
})
</script>
</body>
</html>
위 내용을 test.html로 만들고 크롬에서 열어보면 팝업창의 크기가 고정됩니다!
(팝업 허용이 필요합니다)
댓글남기기