Wie kann ich Medienabfragen verwenden, um iPhone 6, 6 Plus und zukünftige Apple-Geräte anzusprechen?

Medienabfragen für iPhone 6 und 6 Plus

Spezifische Medienabfragen können für die Ausrichtung auf Geräte wie das iPhone 6 und 6 Plus verwendet werden. Diese Abfragen nutzen verschiedene Parameter, um die Zielgeräte anhand ihrer Bildschirmgröße, Auflösung und anderen gerätespezifischen Eigenschaften genau zu identifizieren.

iPhone 6-Abfragen

Für das iPhone 6, die folgenden Medienabfragen können sein beschäftigt:

• Landschaft

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

  Nach dem Login kopieren

• Porträt

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

  Nach dem Login kopieren
• Launch Images
• Porträt: 750 x 1334 (@2x)
• Landschaft: 1334 x 750 (@2x)
• App-Symbol: 120 x 120

iPhone 6 Plus-Abfragen

Verwenden Sie für das iPhone 6 Plus diese Medien Abfragen:

• Landschaft

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

  Nach dem Login kopieren

• Porträt

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

  Nach dem Login kopieren
• Bilder starten
• Porträt: 1242 x 2208 (@3x)
• Landschaft: 2208 x 1242 (@3x)
• App-Symbol: 180 x 180

Allgemeine Abfragen für iPhone 6 und 6 Plus

Um sowohl iPhone 6- als auch 6 Plus-Geräte anzusprechen, Sie können die folgende Abfrage verwenden:

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

Gerätevorhersage für zukünftige Versionen

Apple hat begrenzte Informationen zu zukünftigen Geräten wie dem iPhone 7 und der Apple Watch veröffentlicht . Basierend auf den Spezifikationen des iPhone 6 und 6 Plus und unter der Annahme ähnlicher Namenskonventionen könnten die folgenden Medienabfragen jedoch in Zukunft nützlich sein:

• iPhone 7 (vorhergesagt):

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

  Nach dem Login kopieren

• Apple Watch (spekulativ):
  Unter der Annahme einer Bildschirmgröße von ca 40mm-42mm:

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

  Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich Medienabfragen verwenden, um iPhone 6, 6 Plus und zukünftige Apple-Geräte anzusprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!