Hallo Community,
ich habe 4 Style Sheets - Mobil, Tablet und Desktop. Im vierten sind nur die globalen Angaben, welche sich unabhängig von Gerät nicht ändern (z.B. Schriftarten, Hintergründe...) und eben auch die "Weiche", also diese Media Queries die angeben wann welches CSS geladen werden soll. Das ganze sieht so aus (innerhalb des 4ten CSS):
@import url("desktop.css") screen and (min-width: 950px);
@import url("tablet.css") screen and (max-width: 950px);
@import url("mobile.css") screen and (max-width: 480px);
Sind die Pixelangaben für die jeweiligen Geräte "richtig" (also im Allgemeinen so genutzt)? Am Desktop das Browserfenster hin- und herschrieben klappt wunderbar - es lädt desktop.css, tablet.css und mobil.css. Aber wie sieht es auf "echten" Smartphones und Tablets aus - ist da meine Einstellung richtig?
Ich besitze leider nur iPad und iPhone und damit zum 2ten Problem.
iPad und iPhone machen da totale Zicken. Man sagte mir ich soll das hier ausprobieren:
@import url("mobile.css") (-webkit-min-device-pixel-ratio : 1.5);
Jedoch lädt jetzt auch das iPad das mobile Style Sheet. Ich bekomme es einfach nicht hin, dass das iPad und iPhone verschiedene Style Sheets laden. Sie laden - egal was ich probiere - immer das selbe.
Das iPad Mini macht da wieder ne ganz andere Sache(?). Liegt es am Retina Display?
Bitte bitte kann mir das jemand erklären oder mir ein Beispiel posten, wie es richtig gemacht wird. Ich bin auf dem Gebiet absolutes Frischfleisch.
Mein Ziel ist einfach: Alle Smartphones sollen "mobile.css" laden, alle Tablets "tablet.css" und alle Notebooks, Desktops "desktop.css". Die Rotation der Geräte ist in dem Fall gleichgültig
Bin jetzt schon sehr dankbar für jeden Tipp. 