CSS Media Querys richtig verwendet?

[Sithys]

Hallo Community,
ich versuche derzeit über Media Querys zu unterscheiden, ob das aufrufende Gerät ein iPhone 4 oder iPhone 5 ist um anschließend die verwendeten Bilder auswählen zu lassen.

Dafür habe ich diesen DIV-Container:

<div data-role="page" id="start">
    <a href="#start1" data-transition="fade">
         <div class="main_pic_splash"></div>
    </a>   	 
</div>

CSS:

/*iPhone < 5*/
@media screen and (device-aspect-ratio: 2/3) {
	.main_pic_splash {
		background:url(../img/splash/splash960.png);
		background-size: 320px 480px;
		display: block;
	}
}

/*iPhone 5*/
@media screen and (device-aspect-ratio: 40/71) {
	.main_pic_splash {
		background:url(../img/splash/splash1136.jpg);
		background-size: 320px 568px;
		display: block;
	}
}

Als Ausgabe bekomme ich... Nichts, egal ob iPhone 4 oder iPhone 5 - habe ich die Media Querys so korrekt verwendet?

 

[Daaron]

Ich würd mir die Mühe gar nicht erst machen. Ich würd allen das hochauflösende Bild anbieten und über background-size: cover bzw. contain skalieren.

 

[Sithys]

Hey Daaron,
das hab ich schon versucht mit cover, allerdings skaliert er das Bild dann auf die volle Auflösung (warum auch immer). Und ich muss es ja komprimieren, damit es hochauflösend ist.

 

[Daaron]

Cover skaliert auf die Größe des Elements, dessen Hintergrund es ist. Dabei wird nur so weit skaliert, dass das Element vollständig BEDECKT ist. Der Hintergrund ist also größer als das Element. Wenn das Element endlos hoch ist, der Background aber Widescreen, dann wird der BG natürlich extrem hochskaliert.
Contain hingegen skaliert so, dass das Hintergrundbild vollständig in das Element passt und zu sehen ist.

Rein vom Code her sind deine Media-Queries korrekt, aber ich vermute, du hast die falschen Aspect Ratio - Werte angegeben. Außerdem klappt das, was du da planst, eh nicht. Sobald du das Telefon um 90° drehst crasht der Kram.
Machs dir einfacher: Setz den Wert auf einen sinnvollen für ALLE und spezifiziere ihn für gewisse Geräte weiter. Somit hast du auf jeden Fall eine Anzeige. Quasi wie beim Mobile First - Ansatz, wo du erst mal für die schlankste Hochkant-Auflösung entwickelst und dann in der Breite Break Points setzt, wenn es anfängt Kacke auszusehen.

 

[Sithys]

Also, das mit contain werde ich gleich noch einmal versuchen. Das war mir so gar nicht bewusst. Erstmal ist aber Mittagspause

Und bzgl. der 90°... die App läuft nur Hochformat, Kippen ist nicht möglich :-)