program tip

iPhone 6 및 6 Plus 미디어 쿼리

radiobox 2020. 10. 31. 09:33
반응형

iPhone 6 및 6 Plus 미디어 쿼리

iPhone 6 및 6 Plus 용 미디어 쿼리를 대상으로하는 특정 화면 크기를 아는 사람이 있습니까?

또한 아이콘 크기와 스플래시 화면?

아이폰 6

  • 경치

    @media only screen 
    and (min-device-width : 375px) // or 213.4375em or 3in or 9cm
    and (max-device-width : 667px) // or 41.6875em
    and (width : 667px) // or 41.6875em
    and (height : 375px) // or 23.4375em
    and (orientation : landscape) 
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 667/375)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }

  • 초상화

    @media only screen 
    and (min-device-width : 375px) // or 213.4375em
    and (max-device-width : 667px) // or 41.6875em
    and (width : 375px) // or 23.4375em
    and (height : 559px) // or 34.9375em
    and (orientation : portrait) 
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 375/559)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }

    당신은 당신이 사용할 수있는 선호하는 경우 (device-width : 375px)와 (device-height: 559px)의 위치에 min-와 max-설정.

    이러한 설정을 모두 사용할 필요는 없으며 가능한 모든 설정이 아닙니다. 이들은 가능한 옵션의 대부분에 불과하므로 필요에 맞는 옵션을 선택하고 선택할 수 있습니다.

  • 사용자 에이전트

    iOS 9.0 (13A4305g)이 설치된 iPhone 6 (모델 MG6G2LL / A)에서 테스트 됨

    # Safari
Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1
# Google Chrome
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102)
# Mercury
Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53

  • 이미지 시작

    • 750 x 1334 (@ 2x) (세로)
    • 가로 방향의 경우 1334 x 750 (@ 2x)

  • 앱 아이콘

    • 120x120

iPhone 6 이상

  • 경치

    @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 3) 
{ }

  • 초상화

    @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px)
    and (device-width : 414px)
    and (device-height : 736px)
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 3) 
    and (-webkit-device-pixel-ratio : 3)
{ }

  • 이미지 시작

    • 세로 : 1242 x 2208 (@ 3x)
    • 가로 모드의 경우 2208 x 1242 (@ 3x)

  • 앱 아이콘

    • 180x180

iPhone 6 및 6+

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

예측

애플 웹 사이트 에 따르면 아이폰 6 플러스는 인치당 401 픽셀이고 1920 x 1080이다. 아이폰 6의 더 작은 버전은 326 PPI를 가진 1334 x 750이 될 것이다.

따라서 정보가 정확하다고 가정하면 iPhone 6에 대한 미디어 쿼리를 작성할 수 있습니다.

@media screen 
    and (min-device-width : 1080px) 
    and (max-device-width : 1920px) 
    and (min-resolution: 401dpi) 
    and (device-aspect-ratio:16/9) 
{ }

@media screen 
    and (min-device-width : 750px) 
    and (max-device-width : 1334px) 
    and (min-resolution: 326dpi) 
{ }

참고 에 중단한다 http://dev.w3.org/csswg/mediaqueries-4/ 및 대체

최소 너비와 최대 너비는 1704 x 960과 비슷할 수 있습니다.

Apple Watch (추측)

Watch의 사양은 아직 공식 사양 시트가 없었기 때문에 여전히 약간 추측입니다. 하지만 애플은 이번 보도 자료 에서 시계가 38mm와 42mm 두 가지 크기로 출시 될 것이라고 언급했습니다 .

또한 이러한 크기는 이러한 미디어 쿼리가 작동해야하는 Watch face의 전체 크기가 아니라 화면 크기를 참조한다고 가정합니다. 원치 않는 타겟팅을 희생하지 않고 두 시나리오를 모두 처리하기 위해 몇 밀리미터를 주거나 사용할 수 있다고 확신합니다. 때문에.. 

@media (!small) and (damn-small), (omfg) { }

또는

@media 
    (max-device-width:42mm) 
    and (min-device-width:38mm) 
{ }

주목할 그것은의 가치가 그 미디어 쿼리 레벨 4 그것으로 마음에이 같은 작은 착용 할 수있는 장치 설계의 새로운 기능을 많이 나타납니다 사용할 수 한 번, 첫 번째 공개 초안으로 현재는 사용할 수 W3C에서.

이것은 지금 나를 위해 일하는 것입니다.

아이폰 6

@media only screen and (max-device-width: 667px) 
    and (-webkit-device-pixel-ratio: 2) {

iPhone 6 이상

@media screen and (min-device-width : 414px) 
    and (-webkit-device-pixel-ratio: 3)

이것은 iPhone 6에서 나를 위해 작동합니다.

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

}

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

}

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

}

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

}

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

/*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 : portrait){ 

}

/*iPhone 6 and iPhone 6+ landscape*/
@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이 최소 너비에 대한 거짓말을 알고 있습니다. 375가 아니라 320이라고 생각합니다.

@media only screen and (max-device-width: 667px) 
and (-webkit-device-pixel-ratio: 2) {

}

이것이 제가 iPhone 6을 대상으로 할 수있는 유일한 방법이었습니다. 6+는이 방법을 사용하면 잘 작동합니다. 

@media screen and (min-device-width : 414px) 
and (max-device-height : 736px) and (max-resolution: 401dpi)
{

}

다른 화면 크기에 대한 미디어 쿼리를 사용하여 화면 크기를 타겟팅해야합니다.

대한 아이폰 :

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 2)
{ }

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)
{ }

및 데스크톱 버전 :

@media only screen (max-width: 1080){

}

아이폰 X

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

iPhone 6+, 7+ 및 8+

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

iPhone 6, 6S, 7, 8

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

출처 : 표준 장치에 대한 미디어 쿼리

iPhone 5의 경우

@media screen and (device-aspect-ratio: 40/71)

iPhone 6,7,8 용

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait)

iPhone 6 +, 7 +, 8 + 용

@media screen and (-webkit-device-pixel-ratio: 3) and (min-device-width: 414px)

지금은 잘 작동합니다.

참고 URL : https://stackoverflow.com/questions/25759046/iphone-6-and-6-plus-media-queries

반응형

'program tip' 카테고리의 다른 글

Java의 기본 메소드는 무엇이며 어디에 사용해야합니까?  (0) 2020.10.31
바로 가기를 사용하여 Android Studio에서 필요한 클래스를 자동으로 가져 오는 방법은 무엇입니까?  (0) 2020.10.31
Eclipse : Java가 시작되었지만 오류 코드 = 13을 반환했습니다.  (0) 2020.10.31
ng : angular-cli를 사용하여 새 프로젝트를 만드는 동안 명령을 찾을 수 없습니다.  (0) 2020.10.31
C #에서 자정 DateTime을 만드는 가장 좋은 방법  (0) 2020.10.31

'program tip'의 다른글

  • 현재글iPhone 6 및 6 Plus 미디어 쿼리

관련글

댓글

티스토리툴바