[media] window screen orientation 감지해서 Landscape 보여주기

모바일 디바이스에서 portrait일 경우 가로로 웹사이트 렌더링 시키기

function updateOrientation() {
  const container = document.getElementById('orientation-container');
  const isPortrait = window.matchMedia('(orientation: portrait)').matches;
  const isSmallScreen = window.matchMedia('(max-width: 798px)').matches;

  if (isPortrait && isSmallScreen) {
    container.classList.add('force-landscape');
  } else {
    container.classList.remove('force-landscape');
  }
}

// Initial check
updateOrientation();

// Update on orientation change or screen size change
window.addEventListener('resize', updateOrientation);

위에서 보듯이 스크린이 798px 미만이고 orientation이 portrait일 경우 force-landscape 클래스를 추가해 가로로 웹사이트를 렌더링 시켜준다