2014-09-10 2 views
26

애플의 사이트에 따르면 : 1의 명암비 (일반)아이폰 6, 6 플러스 응답 중단

아이폰 6 :

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

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

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

+3

당신이 당신에게 돈을 대답하는 레이아웃을 디자인하는 경우에 대한 미디어 쿼리의 목록을 얻을 수 있습니다 특정 장치 크기에 맞게 디자인하십시오. 그 점을 지적하고 싶었습니다. –

+0

그 점을 이해합니다. 사실 아이폰을 디자인해서 새로운 아이폰의 정확한 크기를 테스트하고 싶었습니다. – user3349250

+1

좋은 설명 http://www.paintcodeapp.com/news/iphone-6-screens-demystified – Sten

답변

52

당신은 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!)

+2

정보 Jack에게 감사드립니다. 나는 평판이 없다는 이유로 당신의 대답에 투표 할 것입니다. – user3349250

+2

실제로 아이폰 6 플러스는 3 개의 밀도 픽셀 비율을 갖지만 디스플레이를 위해 이미지는 축소 된 후에 표시됩니다. 자세한 정보는 여기를 클릭하십시오 : http://www.paintcodeapp.com/news/iphone-6-screens-demystified – mdcarter

+1

@mdcarter 정말 재미 있습니다! 그에 따라 내 대답을 업데이트 할 것입니다. 감사! – Jack

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

관련 문제