투케이2K

545. (javaScript) [간단 소스] 자바스크립트 devicePixelRatio 및 body.style.zoom 브라우저 화면 확대 및 축소 비율 값 확인 및 변경 수행 본문

JavaScript

545. (javaScript) [간단 소스] 자바스크립트 devicePixelRatio 및 body.style.zoom 브라우저 화면 확대 및 축소 비율 값 확인 및 변경 수행

투케이2K 2026. 6. 2. 21:23
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : 자바스크립트 / 브라우저 / 크롬 / 엣지


- 사전) 👉 document.body.style.zoom 사용 주의점 간략 설명 : 

  >> document.body.style.zoom 은 비표준 CSS 속성이지만 2024~2026 기준으로는 대부분 최신 브라우저에서 동작합니다.

  >> document.body.style.zoom 사용 및 지원 범위 : 

    - Chrome 및 Edge : 지원
    - Safari : 일부 버그 존재
    - Samsung Internet : 지원


- 사전) 👉 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.screen.availWidth 간략 설명 : 

  >> window.screen.availWidth 는 사용자의 화면 (Screen) 에서 실제로 웹 브라우저가 사용 가능한 가로 너비 (px) 를 의미하는 JavaScript 속성입니다.

    - window.screen : 사용자의 디스플레이(모니터) 정보를 담고 있는 객체
    - availWidth : OS UI 요소(작업 표시줄, Dock 등)를 제외한 실제 사용 가능한 가로 길이

  >> window.screen.availWidth 는 전체 화면 폭(screen.width)과는 다르게 다음 요소를 제외합니다.

    - Windows 작업 표시줄(Taskbar)
    - macOS Dock
    - 기타 OS 레벨 UI 영역
    - 즉, 사용자가 앱/브라우저를 표시할 수 있는 최대 가로 공간입니다.

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





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

<!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 src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>






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


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

        try {
          
          // -----------------------------------------------
          // 접속한 브라우저 체크 수행 : Chrome , Edge(Edg) 이면서 Opera(OPR), SamsungBrowser 는 제외 처리
          // -----------------------------------------------
          // ✔️ Edge (Chromium) , Opera (Chromium) , Samsung Browser (Chromium 기반) 브라우저들은 크로미움 엔진 기반으로 User-Agent에 "chrome" 문자열이 포함됩니다.
          // -----------------------------------------------
          // ✔️ Safari / Firefox는 기본적으로 User-Agent 문자열에 "chrome"을 포함하지 않기 때문에, 일치하지 않는 브라우저는 자동으로 제외됩니다.
          // -----------------------------------------------
          const userAgent = navigator.userAgent.toLowerCase();        
            
          //const isChrome = userAgent.includes("chrome") && !userAgent.includes("edg") && !userAgent.includes("opr") && !userAgent.includes("samsungbrowser"); // 크롬만 허용
          const isChrome = (userAgent.includes("chrome") || userAgent.includes("edg")) && !userAgent.includes("opr") && !userAgent.includes("samsungbrowser"); // 크롬, 엣지 허용



          // -----------------------------------------------
          // 접속한 브라우저 체크 수행 : 화면 사이즈 및 모바일 및 개발자 모드 진입 여부 확인
          // -----------------------------------------------
          const browserWidth = window.screen.availWidth;          
          const isMobileOrDevTool = userAgent.search("android") >= 0 || userAgent.search("iphone") >= 0;


          // -----------------------------------------------
          // 접속한 브라우저 체크 수행 : 화면 접속한 비율 사이즈 확인 수행
          // -----------------------------------------------
          const browserZoom = window.devicePixelRatio; // PC = 1 / 태블릿 = 2 / 모바일 = 3


          // -----------------------------------------------
          // 로그 출력 수행
          // -----------------------------------------------

          console.log("■ userAgent : ", userAgent); 
          console.log("■ isChrome : ", isChrome); 
          console.log("■ browserWidth : ", browserWidth); 
          console.log("■ isMobileOrDevTool : ", isMobileOrDevTool);
          console.log("■ browserZoom : ", browserZoom);           


          // -----------------------------------------------
          // 접속한 브라우저 체크 수행 : ✅ document.body.style.zoom 화면 확대 및 축소 비율 변경
          // -----------------------------------------------
          const style = document.body.style;

          if (isMobileOrDevTool == false){ // PC 환경            

            if (isChrome == true && browserZoom >= 1){  // 크롬 브라우저 확인
              console.log('[PC] display check : ' + 'browserWidth = ' + browserWidth + " / " + 'browserZoom = ' + browserZoom + " / " + 'isMobileOrDevTool = ' + isMobileOrDevTool);

              const sizeCal = browserZoom - 1; // 일반 100 퍼센트 기준

              if ("zoom" in style) {
                console.log('[PC] zoom style check success');

                if (sizeCal == 0){ // 100 퍼센트 비율
                  document.body.style.zoom = "0.75"; // ✅ 화면 비율 축소
                }
                else if (sizeCal <= 0.3){
                  document.body.style.zoom = "0.6"; // ✅ 화면 비율 축소
                }
                else {                  
                  document.body.style.zoom = "0.5"; // ✅ 화면 비율 축소
                }
              }              

            }
            else {
              console.log('[PC] display check : ' + 'browserWidth = ' + browserWidth + " / " + 'browserZoom = ' + browserZoom + " / " + 'isMobileOrDevTool = ' + isMobileOrDevTool);
            }

          }
          else { // 모바일 or 개발 툴

            if (isChrome == true && browserZoom >= 2){ // 크롬 브라우저 확인
              console.log('[Tool] display check : ' + 'browserWidth = ' + browserWidth + " / " + 'browserZoom = ' + browserZoom + " / " + 'isMobileOrDevTool = ' + isMobileOrDevTool);

              if ("zoom" in style) {
                console.log('[Tool] zoom style check success');

                document.body.style.zoom = "0.85"; // ✅ 화면 비율 축소
              }
              
            }
            else {
              console.log('[Tool] display check : ' + 'browserWidth = ' + browserWidth + " / " + 'browserZoom = ' + browserZoom + " / " + 'isMobileOrDevTool = ' + isMobileOrDevTool);
            }

          }


          // -----------------------------------------------
          // ✅ 로그 출력 예시
          // -----------------------------------------------
          /*
          [window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]
          ■ userAgent :  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
          ■ isChrome :  true
          ■ browserWidth :  1301
          ■ isMobileOrDevTool :  true
          ■ browserZoom :  2
          [Tool] display check : browserWidth = 1301 / browserZoom = 2 / isMobileOrDevTool = true
          [Tool] zoom style check success
          // */
          // -----------------------------------------------

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

        }

      };
      

    </script>


</head>


<body>


</body>

</html>

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





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

▶️ [간단 소스] 자바스크립트 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


▶️ [간단 소스] 자바스크립트 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' 카테고리의 다른 글

547. (javaScript) [간단 소스] 자바스크립트 navigator.userAgent 사용해 접속한 브라우저 엣시 Edge 인지 확인 수행 - isEdge  (0) 2026.06.05
546. (javaScript) 자바스크립트 AWS Iot registerCertificateWithoutCA 사용해 클레임 인증서 등록 요청 수행 - 공통 클레임 인증서 사용  (0) 2026.06.04
544. (javaScript) [간단 소스] 자바스크립트 sweetAlert 및 zxing 라이브러리 사용해 QR 및 바코드 스캔 카메라 팝업창 생성 수행  (0) 2026.06.02
543. (javaScript) [간단 소스] 자바스크립트 sweetAlert 및 JsBarcode 라이브러리 사용해 Barcode 바코드 표시 팝업창 생성 수행  (0) 2026.06.01
542. (javaScript) [간단 소스] 자바스크립트 sweetAlert 및 qrcode 라이브러리 사용해 QR 코드 표시 팝업창 생성 수행  (0) 2026.05.29
'JavaScript' Related Articles more
Comments