CSS를 이용한 방법

세로모드 : portait
가로모드 : landscape

orientation

뷰포트의 가로, 세로 비율로 장치의 방향을 판단한다.

@media all and(orientation: portait){
	/* Portrait 모드일 때 적용할 CSS */
}

@media all and(orientation: landscape){
	/* landscape 모드일 때 적용할 CSS */
}

자바스크립트를 이용한 방법

window.matchMedia('(orientation: portait);).matches 가 true면 Portait 모드 이고,
window.matchMedia('(orientation: landscape)').matched가 true면 Landscape 모드

if(window.matchMedia('(orientation: portait)').matches){
  	//Portait 모드일 때 실행할 스크립트
  	// 폭과 높이가 같으면 Portait 모드 실행
}else{
  	// Landscape 모드일 때 실행할 스크립트
}

브라우저 창 사이즈를 비교해서 하는 방법

if(window.innerWidth <= window.innerHeight){
  	//Portait 모드일 때 실행할 스크립트
}else{
  	// Landscape 모드일 때 실행할 스크립트
}

창 사이즈가 바뀔때 마다 실행 하는 방법(이벤트 핸들러 추가)

window.addEventListener('resize', fuction(){             
  if(window.matchMedia('(orientation: portait)').matches){
      //Portait 모드일 때 실행할 스크립트
      // 폭과 높이가 같으면 Portait 모드 실행
  }else{
      // Landscape 모드일 때 실행할 스크립트
  }
}

출처: https://studiomeal.com/archives/1068