투케이2K

550. (javaScript) [간단 소스] 자바스크립트 window.visualViewport.resize 사용해 사용자 눈에 실제 보이는 영역 화면 변경 이벤트 감지 수행 본문

JavaScript

550. (javaScript) [간단 소스] 자바스크립트 window.visualViewport.resize 사용해 사용자 눈에 실제 보이는 영역 화면 변경 이벤트 감지 수행

투케이2K 2026. 6. 10. 19:12
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : 자바스크립트 / window.visualViewport / resize


- 사전) 👉 window.visualViewport 간단 설명 : 

  >> Visual Viewport 는 사용자 눈에 실제 보이는 영역 을 감지하는 API 입니다.

  >> Visual Viewport 예시 : pinch zoom , 모바일 키보드 등장 , DevTools open , 화면 scale 변화

  >> Visual Viewport 브라우저 지원 범위 : VisualViewport API 는 현재 대부분의 최신 브라우저에서 지원됩니다

    - Chrome : 61+
    - Edge (Chromium) : 79+
    - Safari macOS : 13+
    - Safari iOS : 13+
    - Firefox : 91+
    - Opera : 48+
    - Samsung Internet : 8.2+
    - Android Chrome : 61+
    - Android WebView : 61+

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

      html, body {
        width: 100%;
        height: 100%;
        margin : 0 auto;
        padding : 0;
        border : none;
        background-color: #666;
      } 

    </style>





    <!-- [CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">    


      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {


          // -----------------------------------------------
          // ✅ window.visualViewport 간략 설명
          // -----------------------------------------------
          // Visual Viewport 는 사용자 눈에 실제 보이는 영역 을 감지하는 API 입니다.
          // -----------------------------------------------
          // Visual Viewport 예시 : pinch zoom , 모바일 키보드 등장 , DevTools open , 화면 scale 변화
          // -----------------------------------------------


          // -----------------------------------------------
          // window.visualViewport 지원 여부 확인 : 구형 브라우저에서는 지원 안함
          // -----------------------------------------------
          if (window.visualViewport) {
            console.log("[window.visualViewport] : Supported");

            // -----------------------------------------------
            // window.visualViewport 초기 화면 접속 사이즈 및 비율 정보 확인
            // -----------------------------------------------
            const viewport = window.visualViewport;

            const init_width = viewport.width;
            const init_height = viewport.height;
            const init_top = viewport.offsetTop;
            const init_left = viewport.offsetLeft;
            const init_scale = viewport.scale;

            console.log("init_width : ", init_width);
            console.log("init_height : ", init_height);
            console.log("init_top : ", init_top);
            console.log("init_left : ", init_left);
            console.log("init_scale : ", init_scale);

            
            // -----------------------------------------------
            // window.visualViewport 사이즈 변경 감지 resize 이벤트 등록
            // -----------------------------------------------
            let timer;

            viewport.addEventListener('resize', () => {
              clearTimeout(timer);

              timer = setTimeout(() => { // ✅ resize 너무 자주 호출 방지 타이머 등록
                console.log('updated resize : ', viewport.width, " / ", viewport.height);
              
                // ✅ 모바일 키보드 감지
                const keyboardOpened = window.innerHeight > window.visualViewport.height;
                console.log('keyboard open:', keyboardOpened);

              }, 100);
            });

          }
          else {
            console.error("[window.visualViewport] : Not Supported");
          }        

        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };
      

    </script>


</head>


<body>


</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ [간단 소스] 자바스크립트 resize 이벤트 사용해 개발자 모드 진입 상태 확인 location.href blank 표시 소스 코드 숨김 설정

https://kkh0977.tistory.com/8865

https://blog.naver.com/kkh0977/224299381329


▶️ [간단 소스] 자바스크립트 Web 웹 크롬 브라우저 키이벤트 및 마우스 우클릭 이벤트 감지 개발자 도구 진입 막기 코드

https://kkh0977.tistory.com/8669

https://blog.naver.com/kkh0977/224202975940


▶️ [간단 소스] 자바스크립트 접속 한 브라우저 환경이 윈도우 환경 인지 확인 - is windows browser

https://kkh0977.tistory.com/8846

https://blog.naver.com/kkh0977/224294530021


▶️ [실시간 브라우저 크기 사이즈 변경 감지 - resize , screen 객체 availWidth , availHeight 사용]

https://kkh0977.tistory.com/971

https://blog.naver.com/kkh0977/222428346030?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

552. (javaScript) [간단 소스] 자바스크립트 window.screen 사용해 브라우저 화면 가로 , 세로 모드 확인 및 change 화면 회전 감지 이벤트 확인  (0) 2026.06.14
551. (javaScript) [간단 소스] 자바스크립트 navigator.userAgentData 사용해 상향 된 User-Agent Client 정보 확인 수행  (0) 2026.06.13
549. (javaScript) 자바스크립트 node-forge 라이브러리 사용해 X.509 인증서 식별 정보 확인 - getSha256Fingerprint  (0) 2026.06.06
548. (javaScript) 자바스크립트 node-forge 라이브러리 사용해 X.509 인증서 만료 기간 유효성 검증 수행  (0) 2026.06.05
547. (javaScript) [간단 소스] 자바스크립트 navigator.userAgent 사용해 접속한 브라우저 엣시 Edge 인지 확인 수행 - isEdge  (0) 2026.06.05
'JavaScript' Related Articles more
Comments