wake-up-neo.net

iPhone 6 und 6 Plus Medienabfragen

Kennt jemand bestimmte Bildschirmgrößen für das Abfragen von Medien für iPhone 6 und 6 Plus?

Auch die Symbolgrößen und Begrüßungsbildschirme?

68
MattT

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.

160
davidcondrey

Das ist was für mich gerade funktioniert:

iPhone 6

@media only screen and (max-device-width: 667px) 
    and (-webkit-device-pixel-ratio: 2) {

iPhone 6+

@media screen and (min-device-width : 414px) 
    and (-webkit-device-pixel-ratio: 3)

Dies funktioniert für mich für das iPhone 6

/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 

}

/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 

}

/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 

}

/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 

}

/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
}

/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 

}

/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ 

}
6
activeping

Nur damit Sie wissen, dass das iPhone 6 ungefähr in der Breite liegt. Es denkt, es sei 320, statt 375 soll es sein. 

@media only screen and (max-device-width: 667px) 
and (-webkit-device-pixel-ratio: 2) {

}

Dies war das einzige, was ich zur Arbeit mit dem iPhone 6 bekommen konnte. Das 6+ funktioniert gut, wenn Sie diese Methode verwenden: 

@media screen and (min-device-width : 414px) 
and (max-device-height : 736px) and (max-resolution: 401dpi)
{

}
3
DevelumPHP

Sie müssen die Bildschirmgröße mithilfe der Medienabfrage für unterschiedliche Bildschirmgrößen festlegen.

für iphone:

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

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

und für desktop version:

@media only screen (max-width: 1080){

}
2
RamThakur

iPhone X

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

iPhone 6+, 7+ und 8+

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

iPhone 6, 6S, 7 und 8

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

Quelle: Medienabfragen für Standardgeräte

2
simhumileco

Für iPhone 5

@media screen and (device-aspect-ratio: 40/71)

für iPhone 6,7,8

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait)

für iPhone 6 +, 7 +, 8 +

@media screen and (-webkit-device-pixel-ratio: 3) and (min-device-width: 414px)

Ab jetzt funktioniert es gut für mich.

0
jegadeesh