"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 미디어 쿼리를 사용하여 iPhone 6, 6 Plus 및 Future Apple 장치를 찾으십시오.

미디어 쿼리를 사용하여 iPhone 6, 6 Plus 및 Future Apple 장치를 찾으십시오.

2025-04-19에 게시되었습니다
검색:669

How Can I Use Media Queries to Target iPhone 6, 6 Plus, and Future Apple Devices?

landscape

@미디어 전용 화면 및 (Min-Device-Width : 375px) 및 (Max-Device-Width : 667px) 그리고 (오리엔테이션 : 풍경) 그리고 (-webkit-min-device-pixel-ratio : 2) {}

이 미디어 쿼리를 사용하십시오. 및 (Min-Device-Width : 414px) 그리고 (Max-Device-Width : 736px) 그리고 (오리엔테이션 : 풍경) 그리고 (-webkit-min-device-pixel-ratio : 3) {}

iPhone 6과 6 Plus 장치를 모두 타겟팅하려면 다음 쿼리를 사용할 수 있습니다.
  • @미디어 전용 스크린 그리고 (Max-Device width : 640px), 화면 및 (Max-Device-Width : 667px), 전용 스크린 및 (최대 폭 : 480px) {}

    @media only screen 
      and (min-device-width : 375px) 
      and (max-device-width : 667px) 
      and (orientation : landscape) 
      and (-webkit-min-device-pixel-ratio : 2) 
    { }
  • Apple은 iPhone 7 및 Apple Watch와 같은 미래의 장치에 대한 제한된 정보를 발표했습니다. 그러나 iPhone 6 및 6 Plus 사양을 기반으로 유사한 명명 규칙을 가정하면 다음 미디어 쿼리가 향후 유용 할 수 있습니다.
    @media only screen 
      and (min-device-width : 375px) 
      and (max-device-width : 667px)
      and (orientation : portrait) 
      and (-webkit-min-device-pixel-ratio : 2) 
    { }
  • iPhone 7 (예측) :
  • @미디어 화면. 및 (Min-Device-Width : 1080px) 그리고 (Max-Device-Width : 1920px) 및 (Min-Resolution : 401dpi) 그리고 (장치-수준-ratio : 16/9) {} @Media 화면 및 (Min-Device-Width : 750px) 및 (Max-Device-Width : 1334px) 및 (Min-Resolution : 326dpi) {}
  • Apple Watch (Speculative) :
약 40mm-42mm의 화면 크기를 가정합니다 :

@media (Max-Device width : 42mm) 그리고 (Min-Device-Width : 38mm) {}

최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3