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

Media Queries for iPhone 6 and 6 Plus

Specific media queries can be used to target devices such as the iPhone 6 and 6 Plus. These queries utilize various parameters to accurately identify the targeted devices based on their screen sizes, resolutions, and other device-specific characteristics.

iPhone 6 Queries

For the iPhone 6, the following media queries can be employed:

• Landscape

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

• Portrait

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

• Launch Images
• Portrait: 750 x 1334 (@2x)
• Landscape: 1334 x 750 (@2x)
• App Icon: 120 x 120

iPhone 6 Plus Queries

For the iPhone 6 Plus, use these media queries:

• Landscape

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

• Portrait

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

• Launch Images
• Portrait: 1242 x 2208 (@3x)
• Landscape: 2208 x 1242 (@3x)
• App Icon: 180 x 180

General Queries for iPhone 6 and 6 Plus

To target both iPhone 6 and 6 Plus devices, you can use the following query:

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

Device Prediction for Future Releases

Apple has released limited information regarding future devices, such as the iPhone 7 and Apple Watch. However, based on the iPhone 6 and 6 Plus specifications and assuming similar naming conventions, the following media queries may be useful in the future:

• iPhone 7 (Predicted):

  @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 (Speculative):
  Assuming a screen size around 40mm-42mm:

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

The above is the detailed content of How Can I Use Media Queries to Target iPhone 6, 6 Plus, and Future Apple Devices?. For more information, please follow other related articles on the PHP Chinese website!