CSS Media Query를 사용하면 간단하게 기기의 다양한 상태 체크가 가능하다.
iOS인지 Windows인지, 마우스 커서가 없지는 않은지, 핸드폰이 가로로 되어있는지 세로로 되어있는지 등등!
매우 많은 방법이 있지만 자주 쓸만한 것들만 우선 기록한다.
쓰다 보면 나중에 늘어날지도, 🧐
CSS
1. 레티나 디스플레이와 일반 디스플레이 구분
/* ----------- 일반 ----------- */
@media screen
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ---------- 일반2 ----------- */
@media not (-webkit-min-device-pixel-ratio: 2) {
}
/* ------ 레티나 디스플레이 ------ */
@media screen
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}2. 테블릿 및 핸드폰 가로, 세로모드 구분
/* ----------- 가로 ----------- */
@media (orientation: landscape) {
}
/* ----------- 세로 ----------- */
@media (orientation: portrait) {
}3. 다크모드, 라이트모드
/* ----------- 다크 ----------- */
@media (prefers-color-scheme: dark) {
}
/* ---------- 라이트 ---------- */
@media (prefers-color-scheme: light) {
}and 연산자를 사용해서 다양한 조건을 체크하는 것도 가능하니 적절히 조합해보자.