iPhone에서는 미디어 쿼리가 작동하지 않지만 브라우저 크기에는 문제 없음

iPhone에서는 미디어 쿼리가 작동하지 않지만 브라우저 크기에는 문제 없음

안녕하세요 저는 현재 Bones on a WordPress라는 Boilerplate 테마를 사용하고 있지만 아이폰에서 반응형 메뉴를 작동시키는 데 문제가 있습니다.메뉴 크기를 수동으로 조정하면 작동하는 것 같습니다.

내가 사용하는 미디어 쿼리는

@media only 화면 및 (min-width: 960 px) {

제가 출근하려고 하는 사이트는 여기에 있습니다:link

제가 테마 작가님을 찾아갔는데 며칠째 답장이 없으셔서 어떤 도움이라도 주시면 감사하겠습니다.

메타뷰포트 객체를 사용해보셨습니까?문서 맨 앞에 이 내용을 입력합니다.

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

You need to mention Media like this  for iphone and smartphones

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

스타일시트를 로드할 때 다음과 같은 문제가 발생했습니다.

<link src="mobile.css" media="only screen and (min-width: 400px)" />

그리고 그 안에서mobile.css, 저는 몇 가지 스타일을 가지고 있었습니다.

@media screen and (min-width: 400px) {
    body {
        background: red;
    }
}

h1 {
    color: blue;
}

그리고 몇몇 기기들(물론 다른 한계점을 가진 아이폰, 아이패드, 그리고 갤럭시 넥서스)은 그것을 보지 못했습니다.background:red;규칙("nested" 미디어 쿼리), "inline" 미디어 쿼리 외부에 있는 규칙(h1). 하지만 크롬이나 다른 브라우저들은 괜찮았습니다.

이상하다는 생각이 들었습니다.

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { 
    ... 
}

저는 그렇게 해야 한다고 생각합니다.

@media only screen and (max-width: 480px), 
@media only screen and (max-device-width: 480px) { 
    ... 
}

아니면...

@media only screen and (max-width: 480px) and (max-device-width: 480px) { 
    ... 
}

또한 귀하의 문서 유형에 대해 XHTML에서 HTML5로 이동하는 것도 고려해 볼 수 있습니다.

언급URL : https://stackoverflow.com/questions/13241617/media-queries-not-working-on-iphone-but-fine-on-browser-resize