투케이2K

193. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 window.visualViewport resize 이벤트 감지 및 DevTools 개발자 도구 진입 확인 본문

투케이2K 유틸파일

193. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 window.visualViewport resize 이벤트 감지 및 DevTools 개발자 도구 진입 확인

투케이2K 2026. 6. 11. 20:11
728x90
반응형

[설 명]

​

프로그램 : Web / JavaScript

​

설 명 : [Web/JavaScript] 자바스크립트 window.visualViewport resize 이벤트 감지 및 DevTools 개발자 도구 진입 확인

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : Web / JavaScript / userAgent / window.visualViewport / resize


- 사전) 👉 navigator.userAgent 간략 설명 :  

  >> navigator.userAgent 는 👉 브라우저와 OS 정보를 담은 문자열입니다.

  >> navigator.userAgent 는 브라우저가 서버나 JS에게 "나는 이런 환경이야" 라고 알려주는 값입니다.

  >> navigator.userAgent 호출 시 표시 되는 예시 값 

    - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

  >> 주의점 : 

    - navigator.userAgent 는 사용자나 브라우저가 쉽게 변경 가능하며, 100% 신뢰는 불가능합니다.


- 사전) 👉 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 {

          // --------------------------------------
          // ✅ 현재 브라우저 사이즈 확인 및 userAgent 값 확인 수행
          // --------------------------------------
          // window.screen.availWidth 값과 하위 viewport.width 값 비교 위해 초기 출력
          // --------------------------------------
          const init_width = window.screen.availWidth;    // 작업표시줄/독 등을 제외한 가용 너비
          const init_height = window.screen.availHeight;   // 가용 높이
          const init_userAgent = navigator.userAgent; 

          console.log('init : userAgent : ', init_userAgent);
          console.log('init : width : ', init_width);
          console.log('init : height : ', init_height);


          // -----------------------------------------------
          // ✅ 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;

            var visualViewport_width = viewport.width;
            const visualViewport_height = viewport.height;
            const visualViewport_top = viewport.offsetTop;
            const visualViewport_left = viewport.offsetLeft;
            const visualViewport_scale = viewport.scale;
            const visualViewport_userAgent = navigator.userAgent;

            console.log("visualViewport_width : ", visualViewport_width);
            console.log("visualViewport_height : ", visualViewport_height);
            console.log("visualViewport_top : ", visualViewport_top);
            console.log("visualViewport_left : ", visualViewport_left);

            console.log("visualViewport_scale : ", visualViewport_scale);
            console.log("visualViewport_userAgent : ", visualViewport_userAgent);

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

            viewport.addEventListener('resize', () => {
              if (resizeTimer !== null && resizeTimer !== undefined){
                console.error('clearTimeout(resizeTimer)');
                clearTimeout(resizeTimer);
                resizeTimer = null;
              } 

              resizeTimer = setTimeout(() => { // ✅ resize 너무 자주 호출 방지 타이머 등록
                console.log('viewport updated resize : ', viewport.width, " / ", viewport.height);
                
                if (resizeTimer !== null && resizeTimer !== undefined){

                  // -----------------------------------------------
                  // ✅ 모바일 키보드 감지
                  // -----------------------------------------------
                  const keyboardOpened = window.innerHeight > window.visualViewport.height;
                  console.log('keyboard open :', keyboardOpened);


                  // -----------------------------------------------
                  // ✅ 화면 리사이즈 유저 에이전트 정보 확인
                  // -----------------------------------------------
                  // 👉 윈도우 브라우저 초기 실행 로그 : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36                
                  // -----------------------------------------------
                  // 👉 맥북 브라우저 초기 실행 로그 : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36                
                  // -----------------------------------------------
                  // 👉 개발자 모드 진입 시 변경 로그 : Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Mobile Safari/537.36
                  // -----------------------------------------------
                  
                  if (visualViewport_width != viewport.width){ // 👉 화면 width 사이즈가 변경 된 경우
                    if (reCallTimer !== null && reCallTimer !== undefined){
                      console.error('clearTimeout(reCallTimer)');
                      clearTimeout(reCallTimer);
                      reCallTimer = null;
                    } 

                    reCallTimer = setTimeout(() => { // ✅ 맥북 크롬 브라우저에서 즉시 userAgent 값 확인 시 일반 브라우저로 표시 되므로, 1초 뒤에 userAgent 재확인 수행

                      if (reCallTimer !== null && reCallTimer !== undefined){
                        console.log('timer call resize');

                        window.visualViewport.dispatchEvent(new Event('resize')); // ✅ viewport.resize 이벤트 강제 호출
                      }                      

                    }, 1000); // 1초 뒤에 실행

                  }
                  
                  const resize_userAgent = navigator.userAgent;
                  console.log('resize_userAgent :', resize_userAgent);  
                  
                  
                  // ✅ 하위 로직에서 userAgent 값 비교해 개발자 모드 활성 여부 확인 수행
                  const android = resize_userAgent.toLowerCase().search("android");
                  const iphone = resize_userAgent.toLowerCase().search("iphone");

                  if ( (android >= 0 || iphone >= 0) && (visualViewport_width != viewport.width) ) { // 모바일 타입 접속이고, 사이즈가 변경된 경우
                    console.warn("Event : Mobile Or DevTool");

                    visualViewport_width = viewport.width; // 👉 변경 된 값 변수에 대입
                  }

                }
                else {
                  console.error('resizeTimer is null');
                }

              }, 100);

            });


            // -----------------------------------------------
            // ✅ 전체 출력 로그 예시
            // -----------------------------------------------
            // 👉 일반 브라우저 초기 접속 수행
            // -----------------------------------------------
            /*
            [window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]
            init : userAgent :  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36
            init : width :  1920
            init : height :  1032
            [window.visualViewport] : Supported
            visualViewport_width :  2560
            visualViewport_height :  1260
            visualViewport_top :  0
            visualViewport_left :  0
            visualViewport_scale :  1
            visualViewport_userAgent :  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36
            viewport updated resize :  1364  /  1142.6666259765625
            keyboard open : false
            resize_userAgent : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36
            // -----------------------------------------------
            // 👉 개발자 모드 진입 수행
            // -----------------------------------------------
            clearTimeout(resizeTimer)
            viewport updated resize :  1100  /  922
            keyboard open : false
            clearTimeout(reCallTimer)
            resize_userAgent : Mozilla/5.0 (Linux; Android 15; Pixel 9) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Mobile Safari/537.36
            Event : Mobile Or DevTool
            timer call resize
            clearTimeout(resizeTimer)
            viewport updated resize :  1100  /  922
            keyboard open : false
            resize_userAgent : Mozilla/5.0 (Linux; Android 15; Pixel 9) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Mobile Safari/537.36            
            */
            // -----------------------------------------------

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

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

        }

      };
      

    </script>


</head>


<body>


</body>

</html>

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





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

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

https://kkh0977.tistory.com/8905

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


▶️ [간단 소스] 자바스크립트 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
반응형
저작자표시 (새창열림)

'투케이2K 유틸파일' 카테고리의 다른 글

192. (TWOK/UTIL) [Web/JavaScript] [기능 보완] 자바스크립트 AWS Kvs HLS 뷰어 Viewer 비디오 스트림 영상 재생 수행 유틸 - 재시도 적용  (0) 2026.06.07
191. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 node-forge 사용해 웹 브라우저에서 X.509 인증서 만료 기간 및 식별 정보 확인 유틸 파일  (0) 2026.06.06
190. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 userAgent 사용해 접속 브라우저 윈도우 환경 체크 및 엑셀 , 워드 스키마 앱 실행 수행  (0) 2026.05.26
189. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 AWS S3 GetPreSignedUrl 프리사인 URL 생성 시 inline 브라우저 표시 설정 방법  (0) 2026.05.20
188. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 SweetAlert 라이브러리 사용해 showAlert , showList , showEdit 팝업창 표시  (0) 2026.05.02
'투케이2K 유틸파일' Related Articles more
Comments