iPhone 6 und 6 Plus Responsive Haltepunkte

Laut Apple-Website:iPhone 6 und 6 Plus Responsive Haltepunkte

Das iPhone 6 hat 1334-by-750-Pixel-Auflösung bei 326 ppi mit 1400: 1 Kontrastverhältnis (typisch)

Das iPhone 6 + hat 1920-by-1080-Pixel-Auflösung bei 401 ppi mit 1300: 1 Kontrastverhältnis (typisch)

Allerdings, was würde die CSS-Medien responsive Breakpoints für jeden sein? (Hoch- und Querformat)

Ich verstehe nicht vollständig, wie die Retina-Bildschirmgrößen mit den verschiedenen responsiven Emulatoren getestet werden können. Jede Hilfe würde sehr geschätzt werden.

Quelle

2014-09-10 user3349250

Allgemeinen gefunden werden, wenn Sie eine ansprechende Layout entwerfen Sie don Design für bestimmte Gerätegrößen nicht. Ich wollte das nur darauf hinweisen. –

Ich verstehe das. Ich entwerfe tatsächlich eine App, also wollte ich die genauen Größen für die neuen iPhones testen. – user3349250

Eine gute Erklärung http://www.paintcodeapp.com/news/iphone-6-screens-demystified – Sten

Sie beziehen sich auf die physischen Pixel des Geräts und nicht auf die Größen css device-width. Nach dieser tweet, werden die Gerätebreiten für die beiden sein:

iPhone 6: 375px (2.0 DPR) 
iPhone 6 Plus: 414px (2.6 DPR)

dass Wissen (und unter der Annahme der Tweet korrekt ist), und vorausgesetzt, Ihr die richtige meta viewport-Tag, Sie befinden sich in etwa:

iPhone 6: 375px (portrait), 667px (landscape) 
iPhone 6 Plus: 414 (portrait), 736px (landscape)

Hoffe, das hilft!

Edit:

die 2.6 DPR des iPhone 6 Plus betrifft, es ist eigentlich 3.0 DPR von 1.15 Downsizing, die in 2.6 DPR führt. Weitere Informationen finden Sie unter http://www.paintcodeapp.com/news/iphone-6-screens-demystified zur Klärung (dank @mdcarter für den Link!)

Quelle

2014-09-10 10:08:14 Jack

Danke für die Informationen Jack. Ich würde deine Antwort abstimmen, weil ich nicht den Ruf habe. – user3349250

Eigentlich wird das iPhone 6 Plus ein 3-Dichten-Pixel-Verhältnis haben, aber das Bild wird nach dem Skalieren für das Display verkleinert. Mehr Informationen hier: http://www.paintcodeapp.com/news/iphone-6-screens-demystified – mdcarter

@mdcarter Das ist wirklich interessant! Ich werde meine Antwort entsprechend aktualisieren. Vielen Dank! – Jack

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


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


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


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 
    /* iPhone 6+ 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 and landscape */ 
} 

@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+ portrait */ 
} 

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

Sie Liste von Medienanfragen bekommen können für alle gängigen Geräte here

Quelle

2014-10-05 08:00:23 qnimate

iPhone 6 und 6 Plus Responsive Haltepunkte

Antwort

Verwandte Themen