iPad mini landscape 인식 이슈

최근 Tablet과 Mobile에서 사용 중인 landscape를 인식하는 로직에 이슈가 발생하여 확인하게 되었습니다. 해당 부분 내용을 남겨두면 좋을 것 같아 포스팅하게 되었습니다.

 

해결 과정

기존 landscape 로직은 아래와 같습니다. device detect 관련 로직은 제외했습니다. 

  const width = window.outerWidth;
  const height = window.outerHeight;
  const isOverLandscapeRatio = width / height > 16 / 9;
  const isLandscapeOrientation = screen.orientation.type.includes('landscape');
  const isLandscape = isOverLandscapeRatio || isLandscapeOrientation;

 

iPad mini에서 해당 로직을 통해 landscape가 인식을 못 하자 디버깅을 통해 screen.orientation에서 undefined이거나 screen.orientation.type을 지원하지 않는 이슈를 발견했습니다.

 

다른 방식으로 landscape을 인식하는 방식을 찾다가 window.matchMedia를 찾게되어 적용했습니다. 해당 로직은 아래와 같습니다.

  const width = window.outerWidth;
  const height = window.outerHeight;
  const isOverLandscapeRatio = width / height > 16 / 9;
  const isLandscapeOrientation = screen.orientation.type.includes('landscape');
  // window.matchMedia 추가
  const isMatchMediaLandscape = window.matchMedia?.(
    '(orientation: landscape)',
  ).matches;
  const isLandscape =
    isOverLandscapeRatio || isLandscapeOrientation || isMatchMediaLandscape;

 

해당 부분을 추가하면서 iPad mini에서도 landscape 정상 동작을 확인했습니다.

 

마무리

사소한 부분이었지만 개발된 내용이 모든 device에서 정상 동작을 해야 하니 꼭 잡아야 하는 이슈였습니다. 개발 시 좀 더 디테일한 부분도 챙겨야겠습니다.

 

---

참고 자료

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia