세로 가로보기 전환 후 미디어 쿼리 일치 감소

Question

나는 이걸 어떻게 처리해야할지 모르겠다. 갤럭시 탭 2 인치, 7 인치 태블릿을 사용하고 크롬을 브라우저 (v26.0.1410.58)로 사용했다. Android 4.1.1. 세로 모드에서 웹 응용 프로그램을로드하는 중이고 미디어 쿼리가 잘 일치하고 가로 모드로 전환하면 모든 것이 제대로 작동하지만 세로 모드로 다시 전환하면 브라우저가 아무 것도 적용하지 않습니다. 스타일을 전혀 사용하지 않고 PC에 연결된 태블릿 USB로 앱을 디버깅하면 크롬이 더 이상 어떤 미디어 쿼리와도 일치하지 않는 것을 알 수 있습니다.

I가인가있어 미디어 질의는 다음

(소자 폭 : 600 픽셀) 및 (MAX-장치 높이가 1024px) 및 (최대 폭 : 600 픽셀) 및 (최소 나는 후 브라우저에서 장치의 폭과 높이를 확인하고 이러한 상황이 발생하기 전에, 그들은 하나 전혀 변경하지 않으면 세로)

: -device 높이 : 976px)과 (방향입니다. 유용 할 수

일부 데이터 :

screen.width 600

screen.height : 976

$ (창) .width() : 600

이 기기에서만 발생하며이 탭에서 앱을 지원해야합니다.

Answer 1

테스트 할 장치가 없지만 일반적으로 간단한 미디어 쿼리 만 사용해야합니다.

아마도 device-width 대신 max-width를 시도해보십시오. 나는 이것을 백분율 기반 레이아웃과 결합하면 레이아웃과 관련된 장치가 아니라는 것을 알게되었습니다.

@media (최대 폭은 : 600PX) {...}

Answer 2

방향 미디어 쿼리는 ... 내가 그들과 떨어져 머물 권합니다 지원하는 진짜 고통이다. 내가 사용하는 미디어 쿼리 세트가 정말 좋습니다. 방금 Zurb 's Foundation 미디어 쿼리를 리버스 엔지니어링했습니다. 당신이 당신의 장치의 범위 사이 에서만 작동하는 스타일을해야하는 경우

// Small screens 
@media only screen { } 
/* Define mobile styles */ 

@media only screen and (max-width: 40em) { } 
/* max-width 640px, mobile-only styles, use when QAing mobile issues */ 

// Medium screens 
@media only screen and (min-width: 40.063em) { } 
/* min-width 641px, medium screens */ 

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } 
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ 

// Large screens 
@media only screen and (min-width: 64.063em) { } 
/* min-width 1025px, large screens */ 

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } 
/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ 

// XLarge screens 
@media only screen and (min-width: 90.063em) { } 
/* min-width 1441px, xlarge screens */ 

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } 
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ 

// XXLarge screens 
@media only screen and (min-width: 120.063em) { } 
/* min-width 1921px, xxlarge screens */ 

Answer 3

당신은

@media only screen and (max-device-width: 600px) { /* STYLES GO HERE */} 
/* styles apply only in portrait mode */ 

@media only screen and (min-device-width: 601px) { /* STYLES GO HERE */} 
/* styles apply only in landscape mode */ 

을 시도해야 ... 아래를 참조하십시오 ... 것을 제외하고는 : 방향 비트를 쓰기 스타일 중 하나에 스타일을 적용하려면 만 입력하십시오.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */} 

신고 한 다른 값을 삭제하십시오. 높이 때문에 충돌이 발생합니다.