[iphone] iPhone 5 CSS 미디어 쿼리

미디어 쿼리 를 사용 max-device-width하거나 사용하는 위에 나열된 이러한 모든 답변 max-device-height은 매우 강력한 버그를 겪습니다. 다른 인기있는 모바일 장치 (아마도 원치 않으며 테스트되지 않았거나 향후 시장에 나올 것입니다)를 대상으로합니다.

이 쿼리는 화면이 더 작은 모든 장치에서 작동하며 디자인이 손상되었을 수 있습니다.

유사한 장치 별 미디어 쿼리 (HTC, Samsung, iPod, Nexus 등)와 결합하여이 연습은 시한 폭탄을 터뜨릴 것입니다. 확대를 위해이 아이디어는 CSS를 제어 할 수없는 페이지로 만들 수 있습니다. 가능한 모든 장치를 테스트 할 수는 없습니다.

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

/* 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)

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

/* styles*/
}

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

}

@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">