태블릿 크로스 브라우징

웹사이트 작업 중 태블릿에서 페이지가 뒤틀려 보이는 현상이 나타났다!
단순히 미디어 쿼리로 max-width을 주었는데 따로 적용이 안됐었다!
그래서 이슈와 해결 방법을 정리하기로 했다.

---

태블릿 크로스 브라우징

(디바이스·브라우저 크로스 브라우징)

태블릿의 경우 태블릿을 가로로 보는 것과 세로로 보는 형식이 다른데 그 가로/세로 차이로도 width가 다르게 잡힌다.

(아이패드 air 기준)
가로로 보았을 때는 min-width:1300px!
세로로 보았을 때는 min-width:1024px!

그렇다고 간단하게

@media screen and (min-width: 1024px)

라고 한다면 태블릿이 아닌 다른 기기(노트북)에서도 적용이 되니 문제가 된다!

그래서 태블릿과 일단 컴퓨터랑 차이는 hover가 되고 안되고의 차이와 pointer(커서)가 있냐 없냐의 차이인데 여기서 간단하게 pointer에 대해서 정리해두겠다.

• 스마트폰 - coarse
• 아이패드 (손터치) - coarse
• 노트북 마우스 - fine
• 데스크탑 마우스 - fine
• 아이패드 + 트랙패드 - fine

coarse = 거친 / 부정확한 포인터
👉 즉, 손가락처럼 정확하지 않은 입력 수단

---

1차 결과 🤔

<style>

  @media screen and (min-width: 1300px)and (hover: none) and (pointer: coarse) {}
  
  @media screen and (min-width: 1024px)and (hover: none) and (pointer: coarse) {}
  
</style>

이렇게 한다면 사용하는데 문제는 없겠지만...
min-width 1300과 1024를 더 확실하게 구분짓고 싶었다!
그래서 구글링을 찾아보니 태블릿의 세로/가로를 구분할 수 도 있다고 하여 그 부분 추가하였다!

---

최종 결과 ✅

<style>

/* 태블릿 가로*/
@media screen and (min-width: 1300px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {}

/* 태블릿 세로*/
@media screen and (min-width: 1024px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {}

</style>

---

느낀점 😊

앞으로 태블릿 같은 구간도 신경을 써야겠고,
배운 방법을 통해 잘 잡아봐야겠다~