iPhone 6, 6 Plus 및 향후 Apple 장치를 대상으로 미디어 쿼리를 사용하려면 어떻게 해야 합니까?

iPhone 6 및 6 Plus용 미디어 쿼리

특정 미디어 쿼리는 iPhone 6 및 6 Plus와 같은 대상 장치에 사용할 수 있습니다. 이러한 쿼리는 다양한 매개변수를 활용하여 화면 크기, 해상도 및 기타 장치별 특성을 기반으로 대상 장치를 정확하게 식별합니다.

iPhone 6 쿼리

iPhone의 경우 6, 다음과 같은 미디어 쿼리가 가능합니다. 고용:

• 풍경

  @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) 
  { }

  로그인 후 복사
• 이미지 출시
• 초상화: 750x1334 (@2x)
• 가로: 1334 x 750(@2x)
• 앱 아이콘: 120 x 120

iPhone 6 Plus 쿼리

iPhone 6 Plus의 경우 다음을 사용하세요. 미디어 쿼리:

• 풍경

  @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 (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 3) 
  { }

  로그인 후 복사
• 이미지 실행
• 세로: 1242x 2208(@3x)
• 가로: 2208 x 1242(@3x)
• 앱 아이콘: 180 x 180

iPhone 6 및 6 Plus

iPhone 6 및 6 Plus 기기를 모두 타겟팅하려면 다음 쿼리를 사용할 수 있습니다.

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

향후 출시에 대한 기기 예측

Apple은 iPhone 7, Apple Watch 등 향후 기기에 관한 제한된 정보를 공개했습니다. 그러나 iPhone 6 및 6 Plus 사양을 기반으로 하고 유사한 명명 규칙을 가정하면 다음 미디어 쿼리가 향후 유용할 수 있습니다.

• iPhone 7(예상):

  @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) 
  { }

  로그인 후 복사

• 애플워치 (추측):
  화면 크기가 40mm~42mm 정도라고 가정:

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

  로그인 후 복사

위 내용은 iPhone 6, 6 Plus 및 향후 Apple 장치를 대상으로 미디어 쿼리를 사용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!