모바일 미디어 쿼리는 데스크톱 버전

Question

을 엉망으로

사이트에서 진행 : http://www.modernfuture.net/wordpress 나는 다음 줄에 내 안드로이드 장치 (480 픽셀)의 가로 모드를 스타일 화 내 CSS에서

:

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

이 작품 완벽하게 데스크톱에서 사이트를 볼 수는 있지만 내 안드로이드 갤럭시 S3에서는 작동하지 않습니다. 내가

@media only screen and (min-width:480px) 

에 코드 줄을 변경하면 내가 (오른쪽에 작은 흰색 공간을 제외하고) 내 안드로이드 장치에서 원하는처럼

그러나 그것은 보이지만 미디어 쿼리의 스타일링 얻을 것으로 보인다 내 데스크톱 버전에 적용됩니다.

가로 모드를 정의하는 CSS가 내 안드로이드 장치에만 적용되는 것이 아니기 때문에 미디어 쿼리가 제대로 작동하지 않는 것 같습니다. 데스크톱 버전 & 또는 안드로이드 프리 버전 모두에 적용되거나 그들. 바탕 화면 너비에 대한 별도의 미디어 쿼리를 설정해야합니까? 아니면 훨씬 더 간단할까요?

미리 감사드립니다.

Answer 1

당신이 당신의 문제의 하나에 서로 다른 픽셀 크기를 필요 했어 S3를 대상으로

@media only screen and (max-device-width: 720px) and (orientation:portrait) { 
    // your css 
} 

@media only screen and (max-device-width: 1280px) and (orientation:landscape) { 
    // your css 
}