CSS Medienabfragen für Iphone 7 und 7 plus

Question

Ich muss einige zusätzliche CSS speziell für iPhone 7 überprüfen & 7 plus, hat iphone 6 und iPhone 7 gleiche physikalische Höhe/Breite? Wenn möglich, erwähnen Sie bitte die Medienabfrage.

Answer 1

http://stephen.io/mediaqueries/ hat eine Liste von Medienabfragen für bestimmte Apple-Produkte, aber Sie sollten versuchen, das Stylen für jedes Gerät einzeln zu vermeiden, da dies die Menge erhöht, die Sie viel schreiben müssen. Ihre Probleme können durch den verwendeten Browser und nicht durch das bestimmte Gerät verursacht werden. Überprüfen Sie dies vor dem Styling für ein Gerät.

Diese Website schlägt vor, dass es die gleiche Auflösung wie das iPhone 6 hat, so dass die gleiche Abfrage beide zielt. https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

iPhone 6 in Portrait & Landschaft

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { /* STYLES GO HERE */} 

iPhone 6 Plus im Portrait & Landschaft

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) { /* STYLES GO HERE */} 

Answer 2

Die Verwendung von genauen Bildschirmabmessungen ist nicht etwas, was ich empfehlen würde. Sie werden auf eine Vielzahl von Bildschirmgrößen stoßen, die Ihr Layout zerstören werden.

Sie sollten nur entwerfen, so dass es in jeder Breite zwischen 300px funktioniert und sagen 950px. Dann werden alle Geräte berücksichtigt.