iPhone 5 CSS 미디어 쿼리

iPhone 5 CSS 미디어 쿼리

아이폰 5는 화면이 더 길고 제 웹사이트의 모바일 뷰를 수신하지 못합니다.아이폰 5에 대한 새로운 응답형 디자인 쿼리는 무엇이며 기존 아이폰 쿼리와 결합할 수 있습니까?

현재 미디어 쿼리는 다음과 같습니다.

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

또 다른 유용한 미디어 기능은 다음과 같습니다.device-aspect-ratio.

아이폰 5는 가로 세로 비율이 16:9가 아닙니다.사실 40시 71분입니다.

아이폰 < 5:
@media screen and (device-aspect-ratio: 2/3) {}

아이폰 5:
@media screen and (device-aspect-ratio: 40/71) {}

아이폰 6:
@media screen and (device-aspect-ratio: 375/667) {}

아이폰 6 플러스:
@media screen and (device-aspect-ratio: 16/9) {}

아이패드:
@media screen and (device-aspect-ratio: 3/4) {}

참조:
W3C에서의 미디어 쿼리
아이폰 모델 비교
가로 세로 비율 계산기

제가 이 블로그에 기여한 것은 다음과 같습니다.

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

해당 기기에 설치된 특정 iOS 버전이 아닌 아이폰 5에 반응한다는 점을 명심하십시오.

기존 버전과 병합하려면 쉼표로 구분할 수 있어야 합니다.

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

NB: 위 코드는 테스트하지 않았지만 쉼표로 구분하여 테스트했습니다.@media이전에 쿼리를 실행하면 문제가 없습니다.

위의 내용은 갤럭시 넥서스와 같이 유사한 비율을 공유하는 일부 다른 장치에 해당될 수 있습니다.640px(일부 이상한 디스플레이 픽셀 이상으로 인한 560px)와 960px(아이폰 <5)와 1136px(아이폰 5) 중 하나의 차원을 가진 장치만 대상으로 하는 추가 방법이 있습니다.

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

위에 나열된 모든 답변은 다음과 같습니다.max-device-width또는max-device-height미디어 쿼리의 경우 매우 강력한 버그로 인해 어려움을 겪습니다. 미디어 쿼리는 또한 많은 다른 인기 있는 모바일 장치(대부분 원하지 않고 테스트되지 않았거나 미래에 시장에 출시될 예정임)를 대상으로 합니다.

이 쿼리는 화면이 더 작은 모든 장치에서 작동하며 설계가 손상될 수 있습니다.

유사한 장치별 미디어 쿼리(HTC, Samsung, IPod, Nexus 등)와 함께 이 작업을 수행하면 시한폭탄이 실행됩니다.디지깅을 위해, 이 아이디어는 당신의 CSS를 통제되지 않는 스파게티로 만들 수 있습니다.가능한 모든 장치를 테스트할 수는 없습니다.

항상 IPone5를 대상으로 하는 유일한 미디어 쿼리는 다음과 같습니다.

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

여기에서는 최대 너비가 아닌 정확한 너비와 높이가 확인됩니다.

---

이제, 해결책은 무엇일까요?가능한 모든 장치에 적합한 웹 페이지를 작성하려면 성능 저하를 사용하는 것이 좋습니다.

열화 패턴은 화면 너비만 확인하고 있습니다. 세로에서 가로로 변경됩니다.*/

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

웹 사이트 방문자의 30% 이상이 모바일에서 오는 경우 이 계획을 뒤집어서 모바일 우선 접근 방식을 제공하십시오.사용하다min-device-width웹 페이지 .이렇게 하면 모바일 브라우저의 웹 페이지 렌더링 속도가 빨라집니다.

저에게 그 일을 한 질문은 다음과 같습니다.

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

아이폰 5의 초상화와 풍경화

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

/* styles*/
}

풍경 속의 아이폰 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

아이폰5 초상화

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

전화 앱 앱을 대상으로 하는 저에게는 어떤 응답도 통하지 않습니다.

다음 링크가 가리키는 대로 아래 솔루션이 작동합니다.

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

몇 가지 옵션을 테스트해 보았지만 도중에 이 옵션을 놓쳤기 때문에 매우 빠른 추가입니다.페이지에 다음이 있는지 확인합니다.

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

모바일 장치용 미디어 기능 데이터베이스에서 다른 스마트폰과 함께 iPhone5에 대한 답변을 매우 쉽게 얻을 수 있습니다.

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

심지어 같은 웹사이트의 테스트 페이지에서 자신만의 장치 값을 얻을 수도 있습니다.

(거부자:제 웹사이트입니다)

아이폰은 1.5의 픽셀 비율을 사용합니다.

아이폰 3G / 3GS : (-웹킷-디바이스-픽셀 비율 : 1) 아이폰 4G / 4GS / 5G : (-웹킷-디바이스-픽셀 비율 : 2)

/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

모든 아이폰을 잡으려면 "-웹킷-최소 장치-픽셀 비율"을 1.5로 낮춰야 할까요?

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}

언급URL : https://stackoverflow.com/questions/12539697/iphone-5-css-media-query