미디어 쿼리를 사용하여 iPhone 6 및 iPhone 6 Plus용 웹사이트를 최적화하려면 어떻게 해야 합니까?

iPhone 6 및 6 Plus용 미디어 쿼리: 종합 가이드

노련한 iOS 개발자이든 이제 막 시작하는 개발자이든 상관없습니다. Apple의 모바일 장치 생태계에서 볼 수 있는 다양한 화면 크기에 맞게 애플리케이션을 최적화하는 데 필수적입니다. 이 라인업에 가장 최근에 추가된 제품 중에는 iPhone 6 및 6 Plus가 있습니다. 애플리케이션이 이러한 기기에 원활하게 적응할 수 있도록 이 문서에서는 타겟팅해야 하는 특정 화면 크기 및 미디어 쿼리에 대한 자세한 지침을 제공합니다.

iPhone 6

375 x 667 픽셀의 화면 크기와 1334 x 750의 해상도를 갖춘 iPhone 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)
{ }

iPhone 6 Plus

더 큰 iPhone 6 Plus는 414 x 736픽셀의 넉넉한 화면 크기를 자랑합니다. 해상도는 1920 x 1080입니다. 이러한 미디어 쿼리를 활용하여 content:

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

iPhone 6과 6 Plus 모두 타겟팅

두 iPhone 모델을 동시에 지원하려는 경우 다음 미디어 쿼리를 사용하세요.

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

추가 고려 사항

향후 iPhone 모델에 대한 예상 미디어 쿼리

Apple에 따르면 향후 iPhone 모델에는 훨씬 더 높은 해상도의 화면이 탑재될 수도 있습니다. 이러한 예측을 바탕으로 다음 미디어 쿼리를 장기 최적화 전략에 통합하는 것을 고려해 보십시오.

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

Apple Watch용 미디어 쿼리(추측)

정확한 Apple Watch의 사양은 알려진 화면 크기에 따라 여전히 약간 모호합니다. 이러한 미디어 쿼리는 유용함:

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

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

웨어러블 장치 시장이 발전함에 따라 미디어 쿼리 레벨 4는 특정 장치 및 폼 팩터를 타겟팅하는 능력을 더욱 향상시킵니다.

위 내용은 미디어 쿼리를 사용하여 iPhone 6 및 iPhone 6 Plus용 웹사이트를 최적화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!