iPhone 6 und 6 Plus Medienabfragen

iPhone 6

• Landscape

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

• Porträt

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

  Wenn Sie möchten, können Sie anstelle der Einstellungen für (device-width : 375px) und (device-height: 559px)min- und max- verwenden.

  Es ist nicht notwendig, alle diese Einstellungen zu verwenden, und dies sind nicht alle möglichen Einstellungen. Dies sind nur die meisten Optionen, so dass Sie auswählen können, welche Ihren Bedürfnissen entspricht.

• User-Agent

  getestet mit meinem iPhone 6 (Modell MG6G2LL/A) mit iOS 9.0 (13A4305g)

  # Safari
  Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1
  # Google Chrome
  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102)
  # Mercury
  Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53
  

• Bilder starten

  • 750 x 1334 (@ 2x) für Hochformat
  • 1334 x 750 (@ 2x) für Landschaft

• App-Symbol

  • 120 x 120

iPhone 6+

• Landscape

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

• Porträt

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

• Bilder starten

  • 1242 x 2208 (@ 3x) für das Porträt
  • 2208 x 1242 (@ 3x) für Landschaft

• App-Symbol

  • 180 x 180

iPhone 6 und 6+

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

Vorhergesagt

Laut der Apple-Website wird das iPhone 6 Plus 401 Pixel pro Zoll haben und 1920 x 1080 Pixel groß sein. Die kleinere Version des iPhone 6 wird 1334 x 750 mit 326 PPI sein.

Unter der Annahme, dass die Informationen korrekt sind, können wir eine Medienabfrage für das iPhone 6 schreiben:

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

Beachten Sie, dass Geräte-Seitenverhältnis in http://dev.w3.org/csswg/mediaqueries-4/ veraltet und durch Seitenverhältnis ersetzt wird. _

Min-Breite und Max-Breite können etwa 1704 x 960 betragen.

Apple Watch (spekulativ)

Specs on the Watch sind immer noch ein bisschen spekulativ, da (soweit ich weiß) noch kein offizielles Spec Sheet vorliegt. Apple hat jedoch in diese Pressemitteilung erwähnt, dass die Uhr in zwei Größen erhältlich sein wird: 38 mm und 42 mm.

Angenommen, diese Größenangaben beziehen sich auf die Bildschirmgröße und nicht auf die Gesamtgröße des Beobachtungsbereichs. Diese Medienabfragen sollten funktionieren. Und ich bin sicher, Sie könnten ein paar Millimeter geben, um eines der beiden Szenarien abzudecken, ohne unerwünschtes Targeting zu opfern da.. 

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

oder

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

Es ist erwähnenswert, dass Media Queries Level 4 von W3C derzeit nur als erster öffentlicher Entwurf verfügbar ist. Sobald er verfügbar ist, wird er viele neue Funktionen mit sich bringen, die für kleinere tragbare Geräte konzipiert wurden.