아이폰 6, 6 플러스 응답 중단

Question

애플의 사이트에 따르면 : 1의 명암비 (일반)

아이폰 6 :

아이폰 6는 1400 326 PPI에서 1334별로 750 픽셀 해상도를 가지고 +는 1300 : 1의 명암비 (일반)로 401ppi에서 1920x1080 픽셀 해상도를 가짐

그러나 CSS 미디어 쿼리 응답 중단 점은 각각 무엇입니까? (세로 및 가로)

다양한 반응 형 에뮬레이터를 사용하여 망막 화면 크기를 테스트하는 방법을 완전히 이해하지 못합니다. 어떤 도움이라도 대단히 감사 할 것입니다.

Answer 1

당신은 CSS device-width 크기가 아닌 장치의 물리적 픽셀을 참조하고 있습니다. 이 tweet에 따르면, 두 장치-폭이 될 것입니다 :

iPhone 6: 375px (2.0 DPR) 
iPhone 6 Plus: 414px (2.6 DPR) 

는 것을 알고 (그리고 트윗이 올바른지 가정), 적절한 meta viewport 태그를 사용하여 가정, 당신은 대략 찾고 :

iPhone 6: 375px (portrait), 667px (landscape) 
iPhone 6 Plus: 414 (portrait), 736px (landscape) 

희망이 있습니다.

편집 :

실제로 3.0 DPR2.6 DPR 결과 1.15에 의해 축소 아이폰 6 플러스의 2.6 DPR에 대해서, 그것은 것. 더 많은 정보는 명확한 설명 http://www.paintcodeapp.com/news/iphone-6-screens-demystified에서 찾을 수 있습니다 (링크에 대한 감사 @mdcarter!)

Answer 2

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    /* iPhone 6 Portrait */ 
} 


@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    /* iPhone 6 landscape */ 
} 


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 
    /* iPhone 6+ Portrait */ 
} 


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 
    /* iPhone 6+ landscape */ 
} 

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
    /* iPhone 6 and iPhone 6+ portrait and landscape */ 
} 

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 
    /* iPhone 6 and iPhone 6+ portrait */ 
} 

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ 
    /* iPhone 6 and iPhone 6+ landscape */ 
} 

당신은 모든 표준 장치 일반적으로 here