HTML-Baustein laden in Abhängigkeit von der Bildschirmbreite

[mw1972]

Ich möchte gerne in eine Website in Abhängigkeit von der Bildschirmbreite unterschiedliche iframe-HTML-Bausteine laden (Google-Kalender).

So soll so aussehen:

Bildschirmbreite klein (mobiles Gerät) -> lade iframe-Nr1
Bildschirmbreite groß (Tablet oder Desktop) -> lade inframe-Nr2

Geht das irgendwie in Contao (mit einer Erweiterung) oder brauche ich dafür ein externes Skript.

Eine reine CSS-Lösung mit Ausblenden von Elementen finde ich nicht gut, da dann das mobile Gerät beide Frames laden muss.

[lucina]

Schau Dir mal https://contao.org/de/extension-list...ection.de.html an.

[psren]

Ich möchte gerne in eine Website in Abhängigkeit von der Bildschirmbreite unterschiedliche iframe-HTML-Bausteine laden (Google-Kalender).

Nach Bildschirmbreite nicht :-) (Ich nehme an du meinst den Viewport)
Das HTML kommt ja von deinem Server. Und die Bildschirmgröße ist was Client-seitiges.
Wenn du dein Browserfenster verkleinerst dann hast du ja keine Verbindung zum Webserver. Somit kein neues HTML.

Du könntest es abhängig vom Gerät machen (die Extension die Lucina gepostet hat) Oder per Javascript deinen Content umbauen.
Falls es nicht per CSS reicht. (Tut es in vielen Fällen aber)

[mw1972]

Danke für die Hinweise. Die Extension ist gut.

Dazu eine Frage: Wenn man den Filter lediglich auf "Mobil" stellt (ohne Zusatz von Gerät, Browser oder Betriebssystem), werden dann alle Smartphones ausgewählt oder bekommt jeder, der mobil ins Netz geht den anderen HTML-Codeschnipsel zugespielt?

Vielleicht eine doofe Frage, aber die Extension verleitet dazu, es so einfach wie möglich zu machen: Alle Smartphones bekommen die mobile Version, alle anderen Geräte die Desktop_Version.

[FloB]

Der Vollständigkeit halber – in JavaScript löst du das per window.matchMedia:

• https://developer.mozilla.org/en-US/...dow.matchMedia
• http://caniuse.com/matchmedia
• https://github.com/paulirish/matchMedia.js/ (Polyfill für ältere Browser)