2012-10-12 4 views
2

저는 현재 브라우저에서 잘 작동하는 부트 스트랩 반응 형 레이아웃을 가진 사이트를 구축하고 있습니다. 그러나 어떤 이유로 Nexus 7 태블릿 (화면 1200 x 800)의 동일한 사이트를 세로 형식으로 볼 때 사이트가 @media (최소 너비 : 768px) 및 (최대 너비 : 979px) 대신 미디어 쿼리 @ 미디어 (최대 너비 : 767px)Twitter 부트 스트랩 800px 태블릿 미디어 쿼리 문제가 있습니까?

흥미롭게도 부트 스트랩 [예제 사이트] [1]에서이 내용을 확인했으며 화면 크기가 @media (최소 너비 : 768px) 및 (최대 너비 : 979px) 미디어 쿼리. 태블릿이 가로 형식 일 때 올바른 쿼리가로드됩니다.

다음은 부트 스트랩 브레이크 포인트입니다.

/* Large desktop */ 
@media (min-width: 1200px) { ... } 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* Landscape phones and down */ 
@media (max-width: 480px) { ... } 

올바른 미디어 쿼리가 태블릿에서 선택되었는지 확인하려면 어떻게해야합니까?

+0

나는 귀하의 질문에 대답 않았다

뷰포트/미디어 쿼리의 논의 참조 할 수 있도록이 보이십니까? –

답변

0

나는 이것이 화면 너비라고 부르는 것과 미디어 쿼리 너비를 정의하는 데 사용되는 것의 문제라고 생각합니다.

나는 다음과 같은 자바 스크립트를 호출하면 항상 미디어 쿼리와 일치하는 것을 발견 :

window.innerWidth

무엇을 당신의 넥서스 7에 대한 그 쇼? http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

관련 문제