Webseite beim Aufruf über Smartphone automatisch auf Subdomain umleiten lassen - wie?

mrkarr · 22.03.2023

Hi zusammen,

ich habe folgendes Problem:
wenn eine meiner Domains über einen PC aufgerufen wird, dann erscheint ganz normal die Webseite, die als index.html auf dem Server hinterlegt ist. So weit, so gut. Nun ist es aber so: hier wird aktuell nur ein (responsive gehaltenes) Bild angezeigt, welches mit einem Link unterlegt ist - und beim Klick darauf wird auf eine weitere Seite außerhalb der Domain weitergeleitet. Dieses Bild ist natürlich nicht für Smartphones optimiert und sieht in der Mobilansicht eher etwas klein aus - und auch nicht hochkant bildschirmfüllend, weil es sich um eine 1920x1080er-Grafik handelt.
Daher möchte ich das gerne so lösen: ich habe noch eine Subdomain, die ich mit einer index.html gefüttert habe, die inhaltlich ein mobil optimiertes Bild bietet. Ist auch schon eingestellt - und sieht beim direkten Aufruf der Subdomain auch super aus.

Jetzt kommt aber mein Problem: wie bringe ich es meiner Webseite bei, dass beim Aufruf via PC die "normale" Seite und beim Aufruf über ein Smartphone automatisch die Subdomain-Seite abgezeigt bekomme?
Gibt es hier ggf. vorgefertigte Scripts, bzw. Texte für den Inhalt der html-Datei?

Hat hier jemand Erfahrung und könnte mir helfen?

Danke & VG
Mr_KARR

Sempervivum · 23.03.2023

Zufällig hatte ich gerade eine ähnliche Frage anders wo. Du kannst abfragen ob es sich um eine Anzeige im Hoch- oder Querformat handelt und dann entspr. weiterleiten. Mein Code auf deine Situation abgewandelt:

Code:

            // Prüfen ob Hochformat vorliegt:
            const isPortrait = matchMedia("(orientation: portrait)").matches;
            if (isPortrait) {
                location.href('die-url-deiner-mobil-domain');
            }

Allerdings wäre es viel einfacher, wenn sich das Ganze auf der selben Seite abspielt, dann brauchtest Du nicht einmal Javascript: Für beide Bilder jeweils ein img-Tag anlegen und das richtige in Abhängigkeit von einer Mediaquery sichtbar machen.
https://wiki.selfhtml.org/wiki/CSS/Media_Queries/Medienmerkmale#orientation
Edit: Oder besser einen Container mit einem Hintergrundbild, dann kannst Du dessen URL direkt durch die Mediaquery umschalten.

Sempervivum · 24.03.2023

PS: Inzwischen habe ich bemerkt, dass "orientation" von Safari nicht unterstützt wird, wohl aber "aspect-ratio". D. h. der Code müsste so geändert werden:

Code:

            // Prüfen ob Hochformat vorliegt:
            const isPortrait = matchMedia("(aspect-ratio < 1)").matches;
            if (isPortrait) {
                location.href('die-url-deiner-mobil-domain');
            }