모바일 사파리가 미디어 쿼리를 무시합니다.

Question

Here's 내 거의 완성 된 웹 사이트.

다음 미디어 쿼리는 iPad mini의 브라우저에서 무시됩니다. 왜? 데스크톱 브라우저의 크기를 조정하면

@media all and (max-width:800px){ 
#trigger {display:none;} 
#telephone_leaf {display:none;} 
#number_leaf {opacity:1;} 
} 

(있는 style.css, 라인 974)

그것은 작품!

실제로이 문제는 다른 문제의 일부입니다. 내 iPad에서 전화 걸기/클릭 리프 이미지를 사용할 수없는 것 같습니다. 그런 이유로, 나는 특정 브라우저 너비에서 처음부터 신 - 빌어 먹을 전화 번호를 표시하는 것으로 저하하려고합니다. 그러나 @m 작품조차도 !! 미쳤어.

Answer 1

모든 코드 앞에 접두어를 붙여야합니다.
@media은 아직 CSS3에 새로운 것이므로 접두사가 모두 붙어 있는지 확인하십시오!

그래서 당신의 코드는 다음과 같이 할 필요가 :

@-webkit-media all and (max-width:800px){ 
#trigger {display:none;} 
#telephone_leaf {display:none;} 
#number_leaf {opacity:1;} 
} 

Answer 2

난 그냥 대답을 발견! 최대 너비는 휴대 기기에서 지원되지 않습니다. max-device-width로 입력해야합니다! :) 여기