뒤늦게 알아서 뼈아픈 유용한 CSS : @media (orientation: landscape)

모바일 웹을 굳이 가로로 돌려서 보는 사람이 있다. media query를 px 기준으로만 잡으면 이럴 때 이미지나 테이블 등이 잘려 보일 수 있다. 그럴 때 쓰는 media query.

@media (orientation: landscape) {
	#image-container {
        max-width: 100%; /* 또는 다른 원하는 크기로 설정 */
     }
}

orientation은 사용자의 디바이스 또는 브라우저의 방향을 의미하며, 두 가지 값으로 나타낼 수 있다 :

• portrait: 세로 방향
• landscape: 가로 방향