Grüß Gott,

gerne würde ich die mobile Version meiner Webseite optimieren und habe hier
folgende Anforderung: Auf der Desktopversion sind einige Inhalte, die ich gerne in der mobilen Version nicht ausliefern möchte. display:none kommt aber nicht in Frage, da hierbei die Inhalte geladen aber nicht angezeigt werden. Ich möchte, dass gewisse Inhalte bei mobilem Zugriff gar nicht erst geladen werden.

Zudem sollen teilweise einzelne Bereiche, teilweise ganze Container zentriert werden. Ich denke mit media queries bin ich an der richtigen Stelle, wie die Lösung aber genau aussieht weiß ich aber leider nicht, daher bin ich für Anregungen und Lösungsvorschläge sehr dankbar.

Beste Grüße
Nick

Hallo

Wie sollen denn "mobile Geräte" (was immer das aus sein soll) erkannt werden?

Alleine schon daran scheitert dein Wunsch.

Gruss

MrMurphy

Servus MrMurphy,

das funktioniert mit media queries, die beim Aufruf die Displaygröße des Geräts erkennen, das ist eine sehr gängige Methode und funktioniert auch weitestgehend bei meiner Webseite bis dato. Lediglich mit dem nicht-laden habe ich dieses Problem noch.

Codebeispiel:

@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

LG

Hallo

Nö, funktioniert nicht. Jedenfalls nicht zur Unterscheidung von mobilen Geräten zu anderen. Du hast ja ausdrücklich von einer mobilen Version geschrieben.

Was ist wenn User mit stationären Geräten nur einen kleinen Bildschirm verwenden oder den Browser nicht im Vollbildmodus betreiben? Nach deiner Logik sind das dann plötzlich mobile Geräte.

Mobile Geräte haben zur besseren Darstellung häufig eine höhere Auflösung als stationäre Desktops. Die würden nach deiner Logik nicht als mobil gelten.

Und was ist mit Geräten, die wahlweise als mobil mit Touchscreen oder stationär mit Tastatur betrieben werden können?

Im Endeffekt kann zwar über mobile Geräte gesprochen werden, eine konkrete Abgrenzung zu anderen Geräten gibt es jedoch nicht. Wenn du doch eine gefunden hast kannst du die gerne mitteilen.

Da die Bezeichnung "mobile Geräte" nicht festgelegt ist, müsstest du schon schreiben was du darunter verstehst.

Gruss

MrMurphy

Es wäre auch interessant zu Wissen, was du mit "einigen Inhalten" meinst?

Wenn es ums "nicht laden" geht dann ist ein Ansatz wie "lazy loading" vielleicht etwas für dich. Dabei geht es darum, dass Bilder erst dann geladen werden, wenn sie für den Benutzer sichtbar werden.

Siehe auch zB hier https://www.heise.de/developer/artik...s-4175606.html