IPad stellt mobile Ansicht dar, obwohl durch Media-Query nicht möglich (Android: OK)

[Robby1]

Hallo Zusammen,

bei der Darstellung meiner Webseite mit IPad komme ich derzeit nicht weiter.
Es sollte folgendermaßen aussehen, was mit Android-Tablets tadellos funktioniert: Auf Desktoprechnern und Tablets mit einer Pixelzahl größer 1049 Pixel (und das ist bei den IPads und IPad mini der Fall) sollten vier Menübilder in zwei Reihen nebeneinander dargestellt werden (siehe Screenshot "Desktoprechner"). Auf dem IPad werden aber nur zwei Menübilder nebeneinander gezeigt, obwohl die Pixelzahl größer 1049 ist und optisch genügend Platz da ist (siehe Screenshot "IPad"). Die Linke Sidebar wird ja schließlich auch angezeigt, was nur bei größeren Displays möglich ist. Das verstehe ich nicht.
Das Verhalten, dass nur zwei statt vier Bilder auf kleinen Displays gezeigt werden sollen, ist nur für Handys geplant, was überall (Android-Handy und IPhone) auch funktioniert (siehe Screenshot "Handy"). Aber für die größeren IPads war das nicht geplant und es sieht auch nicht gut aus. Laut dem eingestellten Media-Query dürfte das auch nicht passieren!!!

Ich habe ein Media-Query in einem stylesheet eingebaut, das für Displays bis zu 1049 Pixeln gelten soll und dann per CSS die Bildbreite der Bilder auf 50% gesetzt, so dass genau zwei Bilder nebeneinander passen. Auf dem IPad mit deutlich mehr Pixeln als 1049 werden aber leider genau diese zwei Bilder angezeigt anstatt 4.

Android-Tablets verhalten sich wie gewünscht: Display > 1049 PX = 4 Bilder nebeneinander und Display < 1049 PX = 2 Bilder nebeneinander

Hat jemand eine Idee, wie ich dieses Verhalten auch auf den IPads hinbekomme?

Für Eure Unterstützung schon mal im Voraus vielen Dank!

Grüße!

Robby

[Spooky]

Ein iPad im Querformat hat eine CSS Pixel Breite von 1024px, nicht 1049px oder mehr. Im Hochformat sind es 768px. Wenn du willst, dass sich dein Desktop Design auch noch am iPad im Querformat ausgeht, musst du es auf 1024px Viewport Breite abstimmen.

Anders ist es jedoch beim Apple iPad Pro, da sind es 1366x1024 CSS Pixel (wenn die Angaben hier stimmen).

[Robby1]

Hallo Spooky,

Danke für den Tip. Ich muss mich aber entschuldigen, denn ich habe am Anfang nicht erwähnt, dass ich es bereits mit einem Media-Query kleiner 768PX probiert habe und es immer noch nicht funktioniert. Dann erscheint nur ein Bild pro Zeile.

Die linke Sidebar zeigen die IPads (im Gegensatz zu kleineren Displays auf Handys) aber an (!!!), was mir sagt, dass das IPad es so interpretiert, dass genügend platz ist.

Ich habe das Problem noch nicht geknackt.

Wenn jemand eine Idee hat, wäre ich dankbar.

Grüße!

Robby

[tab]

Ohne einen Link zum Frontend wird das schwierig.

[Spooky]

Ein Media Query kleiner als 768px (also max-width:767px) würde natürlich keine Auswirkungen auf das iPad haben, da die (virtuelle) Auflösung, wie schon erwähnt, 1024x768 beträgt.

[Robby1]

Hallo Zusammen,

ich hätte den Link gleich mit posten sollen. Ich arbeite derzeit auf einer Subdomain, solange das Projekt noch nicht fertig ist. Auf der eigentlichen Hauptdomain ist nur der Hinweis enthalten, dass hier bald eine Webseite erscheint. Die Subdomain ist: www.dui.du-und-ich.info. (Alle Bilder werden noch durch professionelle Bilder eines Fotografen ersetzt.)

ABER: Spooky hat eine Flasche Wein von mir verdient, denn ich habe nochmals über seine Infos nachgedacht:

Hier die Lösung:
Ich habe zwar direkt nach dem Tip von Spooky das Media-Query für die mobilen Stylesheets heruntergesetzt auf kleiner 1024 Pixel (also auf 1023), aber ich habe das andere Media-Query, das für das Desktop-Stylesheet gilt, leider nicht mit verändert (auf größer 1024 Px). Es war noch auf größer 1049 Px eingestellt. Jetzt habe ich also auch das Media-Query für die Desktop-Stylesheets heruntergesetzt auf "min-width: 1024" -> Und schon funktioniert alles tadellos.

Danke, Leute. Im Contao-Forum wurde mir immer schnell geholfen. Klasse!

Grüße!

Robby

[tintifax]

zwischen 768px - 1000px bekommst Du noch einen horizontalen Querbalken (Desktop)

da ist noch #wrapper anweisung mit width: 960px aktiv