iPhone에서 다르게 표시되는 미디어 쿼리

미디어 쿼리를 사용하여 웹 사이트를 다소 반응 적으로 만들려고하지만 작동하지 않는 것 같습니다. 여기 iPhone에서 다르게 표시되는 미디어 쿼리

이가 좋아 보일 예정이다 무엇 : 여기

을 그리고 것은 실제 웹 사이트입니다 :

http://sandbox.rdonohue.ca/

하지만 내 휴대 전화에서 실제 웹 사이트를 당기면 웹 사이트 이름이 가운데에있는 것을 제외하고 전체 웹 사이트를 봅니다. iPhone 5에 대한 미디어 쿼리를 검색하여 어떻게 보이는지 알 수 있었지만 작동하지 않는 것처럼 보였습니다. 여기

내 CSS입니다 :

@media only screen and (min-device-width : 320px){ 

.titleName { 
    text-align: center; 
    padding-left: 0px; 
} 

.landingImage { 
    height: 200px 
} 

.mainContentTitle { 
    text-align: center; 
    width: 100%; 
} 

.mainContentTitle h5 { 
    padding-left: 10%; 
} 

.mainContentSnippet { 
    width: 90%; 
} 

}

라이언

출처

2014-11-27 ryandonohue

뷰포트 메타 태그가 없습니다. – Christina

여기에 아이폰 5 미디어 쿼리입니다 : @media 만 화면 (분-장치 폭 : 320 ~) 및 (최대-장치 폭 : 568px)

또한 망막 화면뿐만 아니라 픽셀 밀도를 대상으로 할 수도

: -webkit 분 기기 화소 비율 : 1.5 분 - MOZ 기기 화소 비율 : 1.5 를 - o-min- device-pixel-ratio : 3/2

또한 무시할 미디어 쿼리 다음에 css가 없는지 다시 한 번 확인하십시오.

출처

2014-11-27 02:42:06

나는 이것을 추가했지만 아무 것도 바뀌지 않았다. 은 그 때 나는 <메타 이름 = "뷰포트"내용 = "너비 = 장치 폭, 초기 규모 = 1.0"/> 추가 그리고 그것은 내 휴대 전화에 다른하지만보기와 동일하지 보인다. 다른 뷰포트가 필요합니까? – ryandonohue

너는 무엇을 의미하는지 확신 할 수는 없지만 일반적으로 사용하는 뷰포트는 width = device-width, initial-scale = 1.0, user-scalable = no, minimum-scale = 1.0, maximum-scale = 1.0 - 유체/액체 디자인을 사용하는 방법을 살펴볼 수도 있습니다. http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right- one-for-you/ –

뷰포트와 함께 작동하게했습니다! 정말 고마워! 확실히 액체 디자인을 들여다 볼 것입니다. – ryandonohue

iPhone에서 다르게 표시되는 미디어 쿼리

답변

관련 문제