티스토리 뷰

반응형

해상도에 따라 팝업 창의 크기와 위치를 조정하려면 JavaScript를 사용하여 화면의 해상도를 감지하고, 그에 맞게 window.open 메서드로 팝업 창을 띄울 수 있습니다. 아래는 해상도에 따라 팝업 창의 크기와 위치를 조정하는 예제 코드입니다.

javascript
function openPopup() {
    // 현재 화면의 해상도를 가져옵니다.
    var screenWidth = window.screen.width;
    var screenHeight = window.screen.height;

    // 팝업 창의 크기를 설정합니다 (예: 화면의 50% 크기로 설정).
    var popupWidth = screenWidth * 0.5;
    var popupHeight = screenHeight * 0.5;

    // 팝업 창의 위치를 화면 중앙으로 설정합니다.
    var left = (screenWidth - popupWidth) / 2;
    var top = (screenHeight - popupHeight) / 2;

    // 팝업 창을 엽니다.
    window.open('popup.html', 'PopupWindow', `width=${popupWidth},height=${popupHeight},left=${left},top=${top},resizable=yes,scrollbars=yes`);
}

// 팝업 열기 버튼 클릭 시 호출
document.getElementById('openPopupBtn').addEventListener('click', openPopup);
코드 설명:
window.screen.width와 window.screen.height를 사용하여 화면의 해상도를 가져옵니다.
해상도의 50% 크기로 팝업 창의 너비와 높이를 설정합니다. (필요에 따라 조정할 수 있습니다.)
팝업 창을 화면 중앙에 위치하도록 left와 top을 계산합니다.
window.open 메서드를 사용하여 팝업 창을 열고, 계산된 크기와 위치를 적용합니다.
이 코드를 사용하면 Windows 10과 Windows 11에서 해상도에 맞게 팝업 창이 적절하게 열리게 할 수 있습니다. 필요한 경우 팝업 창의 크기나 위치를 조정할 수 있습니다.

반응형
댓글