투케이2K

552. (javaScript) [간단 소스] 자바스크립트 window.screen 사용해 브라우저 화면 가로 , 세로 모드 확인 및 change 화면 회전 감지 이벤트 확인 본문

JavaScript

552. (javaScript) [간단 소스] 자바스크립트 window.screen 사용해 브라우저 화면 가로 , 세로 모드 확인 및 change 화면 회전 감지 이벤트 확인

투케이2K 2026. 6. 14. 12:43
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

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

- 개발 환경 : Web


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


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

  >> Screen API 는 브라우저가 현재 사용자의 디스플레이(모니터, 스마트폰 화면 등)에 대한 정보를 제공하는 인터페이스입니다.

  >> Screen API 는 window.screen 으로 접근할 수 있으며, 현재 브라우저 창이 표시되고 있는 화면의 정보를 나타냅니다.

  >> 다중 모니터 환경에서는 일반적으로 브라우저 창의 중심이 위치한 화면을 기준으로 정보를 반환합니다.

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





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

<!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 {

          // -----------------------------------------------
          // ✅ Screen API 간략 설명
          // -----------------------------------------------
          /*
          1. Screen API 는 브라우저가 현재 사용자의 디스플레이(모니터, 스마트폰 화면 등)에 대한 정보를 제공하는 인터페이스입니다.
          2. Screen API 는 window.screen 으로 접근할 수 있으며, 현재 브라우저 창이 표시되고 있는 화면의 정보를 나타냅니다.
          3. 다중 모니터 환경에서는 일반적으로 브라우저 창의 중심이 위치한 화면을 기준으로 정보를 반환합니다. 
          */
          // ----------------------------------------------- 


          // -----------------------------------------------
          // ✅ window.screen 지원 여부 확인 수행
          // -----------------------------------------------
          if (window.screen) {
            console.log('window.screen Supported : ', window.screen);

            /*
            availHeight: 1120 // OS UI 영역을 제외하고 브라우저가 사용할 수 있는 가용 높이입니다
            availLeft: 0
            availTop: 0
            availWidth: 1336 // OS UI 영역을 제외하고 브라우저가 사용할 수 있는 가용 너비입니다
            colorDepth: 24 // 색상 깊이(Color Depth)를 반환합니다
            height: 1120 // 화면 전체 높이를 반환합니다
            isExtended: true
            onchange: null
            orientation: ScreenOrientation {angle: 90, type: 'landscape-primary', onchange: null} // 화면 방향 정보를 제공합니다
            pixelDepth: 24 // 비트 깊이(Bit Depth)를 반환합니다
            width: 1336 // 화면 전체 너비를 반환합니다
            */


            // -----------------------------------------------
            // ✅ 초기 화면 접속 모드 확인
            // -----------------------------------------------
            // landscape-primary / portrait-primary
            // -----------------------------------------------
            if (window.screen.orientation.type.toLocaleLowerCase().includes("portrait")) {
              console.log("화면 : 세로 모드");
            } else {
              console.log("화면 : 가로 모드");
            }


            // -----------------------------------------------
            // ✅ 화면 회전 감지 이벤트 등록
            // -----------------------------------------------
            window.screen.orientation.addEventListener("change", () => {
                console.log("회전 : ", window.screen.orientation.type);

                if (window.screen.orientation.type.toLocaleLowerCase().includes("portrait")) {
                  console.log("회전 : 세로 모드");
                } else {
                  console.log("회전 : 가로 모드");
                }

              }
            );


            // -----------------------------------------------
            // ✅ 로그 출력 예시
            // -----------------------------------------------
            /*
            [window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]
            window.screen Supported :  Screen {availWidth: 412, availHeight: 915, width: 412, height: 915, colorDepth: 24, …}
            화면 : 세로 모드
            회전 :  landscape-primary
            회전 : 가로 모드
            */
            // -----------------------------------------------

          } else {
            console.error('window.screen Not Supported');
          } 

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

        }

      };
      

    </script>


</head>


<body>


</body>

</html>

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





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

▶️ [간단 소스] 자바스크립트 navigator.userAgentData 사용해 상향 된 User-Agent Client 정보 확인 수행

https://kkh0977.tistory.com/8912

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


▶️ [간단 소스] 자바스크립트 navigator.userAgent 사용해 접속한 브라우저 엣시 Edge 인지 확인 수행 - isEdge

https://kkh0977.tistory.com/8890

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


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

https://kkh0977.tistory.com/8846

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


▶️ [간단 소스] 자바스크립트 navigator.userAgent 사용해 접속한 브라우저 크롬 chrome 인지 확인 수행 - isChrome

https://kkh0977.tistory.com/8735

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


▶️ [navigator (네비게이터) 사용해 브라우저 정보 확인 실시 - userAgent , cookieEnabled]

https://kkh0977.tistory.com/853

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


▶️ [navigator platform 사용해 pc 및 모바일 접속 확인, navigator userAgent 사용해 접속한 모바일 종류 확인]

https://kkh0977.tistory.com/873

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

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

'JavaScript' 카테고리의 다른 글

554. (javaScript) 자바스크립트 node-forge 라이브러리 사용해 X.509 인증서 Certificate , PrivateKey 키 쌍 일치 여부 확인  (0) 2026.06.15
553. (javaScript) [간단 소스] 자바스크립트 실무 에러 발생 및 크래시 감지 이벤트 리스너 등록 - error , unhandledrejection , console  (0) 2026.06.14
551. (javaScript) [간단 소스] 자바스크립트 navigator.userAgentData 사용해 상향 된 User-Agent Client 정보 확인 수행  (0) 2026.06.13
550. (javaScript) [간단 소스] 자바스크립트 window.visualViewport.resize 사용해 사용자 눈에 실제 보이는 영역 화면 변경 이벤트 감지 수행  (0) 2026.06.10
549. (javaScript) 자바스크립트 node-forge 라이브러리 사용해 X.509 인증서 식별 정보 확인 - getSha256Fingerprint  (0) 2026.06.06
'JavaScript' Related Articles more
Comments