CSS3 미디어 쿼리가 모바일 장치에 표시되지 않는 이유는 무엇입니까?

Question

나는 아이폰 4를 가지고있다. 나는 해상도가 내 스타일의 매개 변수에 속한다는 것을 안다. 그러나 스마트 폰에서 전폭 레이아웃을보고 있습니다.

나는 눈을 뜨게되면 소스를 볼 수 있습니까? 내 브라우저에는 표시되지만 기기에는 표시되지 않습니다. 내 HTML에서

http://georgiaderm.com/mobile/

:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

내 CSS에서 :

/* ---------------------------------------------------------------------- */ 
/* Media Queries 
/* ---------------------------------------------------------------------- */ 

//* Smaller than standard 960 (devices and browsers) */ 
@media only screen and (max-width:1000px) { 
} 

/* Tablet Portrait size to standard 960 (devices and browsers) */ 
@media only screen and (min-width:768px) and (max-width:1000px) { 
    body {padding:10px 4px; width:760px;} 
} 

/* All Mobile Sizes (devices and browser) */ 
@media only screen and (max-width:768px) { 
    html {background:#fff; padding:10px;} 
    body {box-shadow:none; margin:0; padding:0; width:auto;} 
    body > nav {display:none;} 
} 

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
@media only screen and (min-width:480px) and (max-width:768px) { 
} 

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
@media only screen and (max-width:480px) { 
    .alpha, .omega {float:none;} 
    .alpha > * {margin:10px auto;} 
} 

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
@media only screen and (max-width:320px) { 
    footer div {float:none; width:auto;} 
} 

편집 : 그것을 단순화.

내가 여기있는 동안 누구나 작은 장치에서 JS 탭을 비활성화하기위한 간단한 전략을 갖고 있습니까?

Answer 1

좋아, 내가이 신비를 풀지는 못했지만 모바일 스타일을 사이트의 나머지 부분으로 옮기고 갑자기 움직였다. 나는 mobile.css에서 CSS 특이성으로 계속 변덕스러워 보이지만, 미디어 쿼리를 내 main.css로 이동하면 모든 것이 잘됩니다.

도움을 주셔서 감사합니다.

Answer 2

내가 특별히 예를 들어, 내 미디어 쿼리에 0 픽셀을 정의

@media only screen and (min-width:0px) and (max-width:1000px) 
{ 
    /* STYLES GO HERE */ 
} 

은 아마도 그 도움이 될 것입니다?