it-swarm.com.de

iPhone 5 CSS-Medienabfrage

Das iPhone 5 hat einen längeren Bildschirm und fängt die mobile Ansicht meiner Website nicht ein. Was sind die neuen Responsive Design-Abfragen für das iPhone 5 und kann ich sie mit vorhandenen iPhone-Abfragen kombinieren?

Meine aktuelle Medienanfrage lautet:

@media only screen and (max-device-width: 480px) {}
129
Maverick

Eine weitere nützliche Medienfunktion ist device-aspect-ratio.

Beachten Sie, dass das iPhone 5 kein Seitenverhältnis von 16: 9 hat . Es ist in der Tat 40:71.

iPhone <5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iPhone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

Referenz:
Media Queries @ W3C
iPhone-Modellvergleich
Seitenverhältnisrechner

275
2C-B

Es gibt das, was ich zu verdanken habe dieses Blog :

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

Beachten Sie, dass das iPhone 5 nicht auf die auf dem Gerät installierte iOS-Version reagiert.

Um mit Ihrer vorhandenen Version zusammenzuführen, sollten Sie diese durch Kommas trennen können:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

NB: Ich habe den obigen Code nicht getestet, aber ich habe durch Kommas getrennte @media Abfragen vor, und sie funktionieren gut.

Beachten Sie, dass das oben genannte Problem möglicherweise bei einigen anderen Geräten auftritt, die ähnliche Bildverhältnisse aufweisen, z. B. beim Galaxy Nexus. Hier ist eine zusätzliche Methode, die nur Geräte mit einer Dimension von 640px (560px aufgrund einer seltsamen Anzeige) zum Ziel hat -Pixel-Anomalien) und eine zwischen 960px (iPhone <5) und 1136px (iPhone 5).

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}
63
Eric

Alle diese oben aufgeführten Antworten, die max-device-width oder max-device-height für Medienanfragen, leiden unter sehr starken Fehlern: Sie zielen auch auf viele andere beliebte Mobilgeräte (wahrscheinlich unerwünscht und nie getestet, oder das wird in Zukunft auf den Markt kommen).

Diese Abfragen funktionieren für jedes Gerät mit kleinerem Bildschirm, und wahrscheinlich ist Ihr Design kaputt.

In Kombination mit ähnlichen gerätespezifischen Medienabfragen (für HTC, Samsung, iPod, Nexus ...) wird diese Übung eine Zeitbombe auslösen. Beim Debiggen kann diese Idee Ihr CSS zu einer unkontrollierten Spagetti machen. Sie können niemals alle möglichen Geräte testen.

Bitte beachten Sie, dass die einzige Medienabfrage die immer auf IPhone5 und nichts anderes zielt lautet:

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

Beachten Sie, dass hier gena width und height, nicht max-width markiert ist.


Was ist nun die Lösung? Wenn Sie eine Webseite schreiben möchten, die auf allen möglichen Geräten gut aussieht, empfiehlt es sich, Degradation zu verwenden

/ * Verschlechterungsmuster Wir überprüfen die Bildschirmbreite nur mit Sicherheit, dies ändert sich von Hochformat zu Querformat * /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

Wenn mehr als 30% Ihrer Website-Besucher von Handys stammen, stellen Sie dieses Schema auf den Kopf und stellen Sie den Mobile-First-Ansatz bereit. Verwenden min-device-width In diesem Fall. Dies beschleunigt das Rendern von Webseiten für mobile Browser.

33
Dan

für mich war die Frage, die den Job erledigt hat:

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)
7
eli philosoph

iPhone 5 im Hoch- und Querformat

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

iPhone 5 in Landschaft

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

iPhone 5 im Porträt

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}
6
Sudheer

Keine der Antworten funktioniert für mich, wenn ich auf eine Phonegap-App abstelle.

Wie die folgenden Link Punkte, funktioniert die Lösung unten.

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}
5
ppcano

Nur eine sehr schnelle Ergänzung, da ich einige Optionen getestet habe und diese auf dem Weg verpasst habe. Stellen Sie sicher, dass Ihre Seite Folgendes enthält:

<meta name="viewport" content="initial-scale=1.0">
5
Mike Wells

Sie können Ihre Antwort für das iPhone 5 zusammen mit anderen Smartphones ziemlich einfach in der Medienfeature-Datenbank für Mobilgeräte abrufen:

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

Sie können sogar Ihre eigenen Gerätewerte auf der Testseite auf derselben Website abrufen.

(Haftungsausschluss: Dies ist meine Website)

3
pieroxy
/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}
0
Arthur Yakovlev

afaik no iPhone verwendet ein Pixel-Verhältnis von 1,5

iPhone 3G/3GS: (-webkit-Geräte-Pixel-Verhältnis: 1) iPhone 4G/4GS/5G: (-webkit-Geräte-Pixel-Verhältnis: 2)

0
noreabu