1. 모바일 화면 구현문제

반응형으로 만들기 위해 미디어쿼리를 사용하곤한다.
최근에도 웹 작업을 할 때 모바일 웹에도 최적화 작업을 위해

@media (max-width: 480px) {
  ...
}

이런 식으로 가로 크기에 따라 화면이 달라지게 구현했었다.

그런데 폰을 가로로 하고 웹을 볼 때가 문제가 되서 찾아보기 시작했다.

2. portrait, landscape

react-native로 앱을 개발하다가 안건데 폰을 세로로 볼 때가 portrait, 가로로 볼 때가 landscape다.
웹에서도 똑같이 적용해서 사용할 수 있었다.

@media (orientation: portrait) {		// 폰이 세로일 때
  ...
}

@media (orientation: landscape) {		// 폰이 가로일 때
  ...
}

css에서 위처럼 폰이 가로인지 세로인지에 따라 다르게 스타일을 적용할 수 있었다.

pc 브라우저에서도 저 상태가 적용되는거 보니 가로, 세로 길이 중 뭐가 더 긴지에 따라 정해지는듯 하다.(확실하지 않음)

3. javascript에서 사용할 때

if(matchMedia('screen and (max-width: 480px)').matches) {
  ...
}

javascript에서는 위처럼 matchMedia를 이용해 디바이스 가로 크기에 따라 다르게 적용할 수 있다.

마찬가지로 폰에서 portrait, landscape도 같이 적용할 수 있다.

if(matchMedia('(orientation: portrait)').matches) {
  ...
}

if(matchMedia('(orientation: landscape)').matches) {
  ...
}