Queransicht auf Handy

[struggle]

Hallo,
folgende Seite ist auf dem Handy schlecht zu lesen, bzw. zu bedienen:https://www.meinlangengrassau.de/stadtplan.html
In der Queransicht ist das machbar !
Ich möchte gerne, daß beim Aufrufen der Seite auf dem Handy und nur dort ein Hinweis erscheint, die Queransicht zu nutzen.
Eine andere Möglichkeit wäre vielleicht noch, die Queransicht automatisch zu übernehmen.
Kann mir bitte jemand helfen ?

[Bushisan]

Versuchs mal damit

Code: Alles auswählen

<div class="rotate-hint">
  Bitte drehe dein Handy ins Querformat.
</div>

<div class="content">
  <!-- eigentlicher Seiteninhalt -->
  ...
</div>

Code: Alles auswählen

/* Standard: Hinweis ausblenden, Inhalt zeigen */
.rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  background: #111;
  color: #fff;
  font: 18px/1.4 system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  z-index: 9999;
}

.content {
  display: block;
}

/* Im Hochformat: Hinweis einblenden, Inhalt ausblenden */
@media screen and (orientation: portrait) {
  .rotate-hint {
    display: flex;
  }

  .content {
    display: none;
  }
}

/* Im Querformat: Hinweis ausblenden, Inhalt zeigen */
@media screen and (orientation: landscape) {
  .rotate-hint {
    display: none;
  }

  .content {
    display: block;
  }
}

[struggle]

Das Versuche ich dann mal!
Dankeschön

[Bushisan]

Viel Erfolg, ist ne KI Antwort - ich hab's auch nicht getestet.
Ich hoffe diese Art von Antworten ist OK !

Grüße

[Tommy Herrmann]

Moin Hubi,

grundsätzlich solltest Du schon die generierten Codes von der KI zunächst selbst prüfen bevor Du diese hier anbietest, ich mache das auch immer so.

Bedenke, dass mindestens die Hälfte aller von der KI generierten Codes aus vielerlei Gründen immer erst einmal nicht funktionieren.

Das soll jetzt nicht heißen, dass der Code von Dir nicht funktioniert - ich habe diesen jetzt aber auch nicht geprüft.

Der Grund liegt fast immer darin, dass entweder die Vorgaben von Mobirise von der KI nicht beachtet wurden oder eine inkompatible Bootstrap‑Version zugrunde gelegt wird.

Man sollte also der KI immer auch die Mobirise-Version (v6) und die verwendete Bootstrap-Version (v5.0.1) mitteilen, bevor man irgendeine Frage stellt. Die KI verwendet sonst höchstwahrscheinlich die aktuellste Bootstrap-Version (v5.3). Viele Funktionen werden in Mobirise dann nicht funktionieren, da ältere Versionen nicht mit neueren kompatibel sind.

[Bushisan]

Alles klar Tommy! Ich halte mich dran!
Grüße Hubert

[struggle]

Hallo Tommy,
nun sei doch nicht so streng,
Bushian hat mir doch gesagt, daß es mit KI erstellt wurde, daß er es nicht getestet hat und gefragt ob es für mich ok wäre.

[Bushisan]

Alles gut, er hat doch recht damit! Und er hat’s mir ja auch in einer vernünftigen Art und Weise geschrieben.
Aber Danke für Deinen Beistand

[struggle]

Der Vorschlag von Bushian hat leider nicht funktioniert, dennoch danke

Ich habe es folgendermassen gelöst:
1) Modal mit dem Namen "Quer" hinzugefügt
2) Javascript

Code: Alles auswählen

<script>
$(document).ready(function(){
    if (window.innerWidth <= 768) {
        $('#Quer').modal('show');
    }
});
</script>

in der Seiteneinstellung bei "End of Code" eingefügt.
Jetzt öffnet sich beim Betrachten der Seite
https://www.meinlangengrassau.de/stadtplan.html
nur auf dem Handy ein Hinweisfenster. Eigentlich ganz einfach

[Bushisan]

Ja, tut mir leid! Hätte gern mal geholfen.
Toll gelöst