미디어 쿼리는 풍경

Question

에서 제대로 작동하지 않는 나는 다음과 같은 미디어 쿼리가 있습니다

@media screen and (max-width: 480px) { 

내 넥서스 5 세로 모드에서 웹 사이트를보고, 그것이 내가 원하는 모습을. 그러나 휴대 전화를 가로 모드로 전환하면이 미디어 쿼리에 지정된 것이 아닌 전체 사이트가 표시됩니다.

왜 이런 일이 발생합니까? 나는 또한 시도했다 :

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 

이것은 문제를 해결하지 못했다.

Answer 1

사실 넥서스 5 가로 폭은 590px 그리고 당신은 최대 폭 준 : 480 픽셀 ....

See the view-port sizes

당신은 할 수 있습니다 이런 식으로 미디어 쿼리를 제공하십시오 : -

@media screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) { 
.class-name {} 
} 

@media screen and (min-width : 320px) and (max-width : 480px) and (orientation :landscape) { 
.class-name {} 
} 

는이

Answer 2

Nexus 5의 효과적인 화면 크기는 360x598이므로 가로보기에서는 뷰포트가 미디어 쿼리의 최상단보다 넓습니다. 최대 너비를 599px로 늘리면 Nexus 5의 가로 방향을 캡처 할 수 있습니다.

@media screen and (max-width: 599px) { ... } 

reference