223. (TWOK/WORK) [업무 이슈] 맥북 Mac OS 크롬 브라우저에서 개발자 모드 진입 시 자바스크립트 resize 이벤트 미동작 관련 문의

---

[제 목]

​

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

​

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

​

제목 : [업무 이슈] 맥북 Mac OS 크롬 브라우저에서 개발자 모드 진입 시 자바스크립트 resize 이벤트 미동작 관련 문의

​

 

---

[내 용]

​

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

- 제 목 : [업무 이슈] 맥북 Mac OS 크롬 브라우저에서 개발자 모드 진입 시 자바스크립트 resize 이벤트 미동작 관련 문의


- 테스트 환경 : JavaScript / Mac OS / 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+

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





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

1. 🟥 맥북 Mac OS 크롬 브라우저에서 개발자 모드 진입 시 자바스크립트 resize 이벤트가 즉시 동작 되지 않는다는 문의


2. 🟥 윈도우 OS 크롬 브라우저에서는 개발자 모드 진입 시 자바스크립트 resize 이벤트가 정상 동작 되는 것 확인

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





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

1. 맥북 Mac OS 에서 크롬 브라우저 접속 수행


2. 크롬 브라우저 상단 설정 화면에서 > 개발자 모드 진입 수행


3. 🟥 자바스크립트 resize 이벤트가 즉시 동작 되지 않는 것 확인


4. 🟥 추가) 맥북 크롬에서 DevTools (개발자 모드) 를 열었을 때 window.resize 이벤트가 즉시 안 들어오는 현상 정리

  >> DevTools 도킹(dock) 위치 변경

  >> Responsive Mode 사용

  >> macOS Retina 스케일링

  >> Chrome 성능 최적화 때문에 resize 이벤트 batching

  >> iframe / SPA 환경

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






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

1. 🟦 window.visualViewport 이벤트를 사용해 resize 화면 변경 이벤트를 감지하도록 코드 수정 실시

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

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

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


2. 🟦 자바스크립트 window.visualViewport 지원 여부 체크 및 이벤트 등록 소스 코드 첨부 : 

  const viewport = window.visualViewport;

  if (viewport) {
    viewport.addEventListener('resize', () => {
      console.log('visual viewport');
    });
  } else {
    window.addEventListener('resize', () => {
      console.log('fallback');
    });
  }
------------------------------------------------------------------------------





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

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

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

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8865

541. (javaScript) [간단 소스] 자바스크립트 resize 이벤트 사용해 개발자 모드 진입 상태 확인 location.h

---