220. (TWOK/WORK) [개발 요청] 웹 관리자 대시보드에서 자동으로 화면 확대 및 축소 비율 설정 개발 요청 - document.body.style.zoom

---

[제 목]

​

주제 : 투케이2K 업무 정리

​

타이틀 : 투케이 / 2k / 업무 정리

​

제목 : [개발 요청] 웹 관리자 대시보드에서 자동으로 화면 확대 및 축소 비율 설정 개발 요청 - document.body.style.zoom

​

 

---

[내 용]

​

------------------------------------------------------------------------------
[개발 및 테스트 환경]
------------------------------------------------------------------------------

- 제 목 : [개발 요청] 웹 관리자 대시보드에서 자동으로 화면 확대 및 축소 비율 설정 개발 요청 - document.body.style.zoom


- 테스트 환경 : Chrome / JavaScript


- 사전) 👉 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% 신뢰는 불가능합니다.


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

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

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

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

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





------------------------------------------------------------------------------
[이슈 사항]
------------------------------------------------------------------------------

1. 🟥 웹 관리자 대시보드 접속 시 기존 100 퍼센트 화면 비율에서 자동으로 비율을 확대해 120 퍼센트로 브라우저를 사용할 수 있게 해달라는 개발 요청 접수


2. 🟥 기능 구현 요청 내용 정리 : 

  >> AS-IS : 웹 관리자 대시 보드 접속 시 100 퍼센트 화면 비율로 표시하는 것을 / TO-BE : 120 퍼센트로 브라우저를 확대 표시할 수 있도록 개발 요청

  >> 제약 사항 : 크롬 브라우저 및 엣지 브라우저 기준으로 기능 개발을 수행

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





------------------------------------------------------------------------------
[원인 파악 및 증상 재현]
------------------------------------------------------------------------------

1. 🟥 웹 관리자 대시보드 접속 시 기존 100 퍼센트 화면 비율로 브라우저가 표시 되는 것 확인


2. 🟥 브라우저 확대 및 축소 설정 한 이후에 브라우저 재접속 시 해당 설정 값으로 비율이 표시 되는 것 확인

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






------------------------------------------------------------------------------
[조치 내용]
------------------------------------------------------------------------------

1. 🟦 자바스크립트에서 window.onload 시 document.body.style.zoom 값을 사용해 자동으로 화면 비율 변경 수행 실시

  >> 👉 document.body.style.zoom 은 크롬 및 엣지 브라우저에서 사용할 수 있습니다.


2. 🟦 자바스크립트 소스 코드 예시 : 

    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);
    }

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





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

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

https://kkh0977.tistory.com/8879

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


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

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

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8879

545. (javaScript) [간단 소스] 자바스크립트 devicePixelRatio 및 body.style.zoom 브라우저 화면 확대 및 축소

---