How to Write Effective Media Queries for iPhone 6 and iPhone 6 Plus?

Media Queries for iPhone 6 and iPhone 6 Plus

Question: What are the specific screen sizes for targeting media queries for iPhone 6 and iPhone 6 Plus?

Answer:

iPhone 6:

• Landscape:

  • min-device-width: 375px
  • max-device-width: 667px
  • width: 667px
  • height: 375px
  • orientation: landscape

• Portrait:

  • min-device-width: 375px
  • max-device-width: 667px
  • width: 375px
  • height: 559px
  • orientation: portrait

iPhone 6 Plus:

• Landscape:

  • min-device-width: 414px
  • max-device-width: 736px
  • orientation: landscape
  • min-device-pixel-ratio: 3

• Portrait:

  • min-device-width: 414px
  • max-device-width: 736px
  • device-width: 414px
  • device-height: 736px
  • orientation: portrait
  • min-device-pixel-ratio: 3
  • device-pixel-ratio: 3

Both iPhone 6 and iPhone 6 Plus:

• max-device-width: 640px
• max-device-width: 667px
• max-width: 480px

Predicted Media Queries for Upcoming iPhone Models

iPhone 6:

• min-device-width: 750px
• max-device-width: 1334px
• min-resolution: 326dpi

iPhone 6 Plus:

• min-device-width: 1080px
• max-device-width: 1920px
• min-resolution: 401dpi
• device-aspect-ratio: 16/9

The above is the detailed content of How to Write Effective Media Queries for iPhone 6 and iPhone 6 Plus?. For more information, please follow other related articles on the PHP Chinese website!