Angenommen, meine fancy Webseite ist für Landscape/Desktop oder */Mobile ausgelegt. Was ist dann ein Tablet? Da ist zu viel Platz, um eine abgespeckte mobile Webseite auszuspielen, andererseits gibt es da eine Portrait-Ansicht, für die mein Desktop-Layout nicht gemacht ist.
Also: Erzwungene Landscape-Ansicht, das geht ja mit nativen Apps auch.
Problem: Die App ist der Browser, nicht die Webseite darin. Ich kann aber aus der Webseite heraus nicht auf den Browser zugreifen, das wäre ein Security- und Privacy-Alptraum. Ich kann also nur die Webseitenausrichtung sperren, nicht die des Browsers. Dafür gibt es mehrere Ansätze:
- PWAs können das über ihr Manifest. Wird von Safari nicht unterstützt iPad fiele also aus.
- Über JS kann man das ebenfalls sperren – Wird von Safari ebenso nicht unterstützt.
- Es gäbe noch so hacky Ansätze, per JS auf die entsprechenden Events zu hören und die dann zu canceln. Die meisten diesbezüglichen Events (bspw. orientationchange) sind aber deprecated und man landet schnell wieder bei der vorherigen Api, die leider immer noch nicht von Safari unterstützt wird 😠
- Also CSS. Das hier scheint mir aktuell der am Ehesten gangbare Weg zu sein:
|
1 2 3 4 5 6 7 8 9 10 |
@media screen and (orientation: portrait){ html { -webkit-transform: translateY(-100%) rotate(90deg); transform: translateY(-100%) rotate(90deg); -webkit-transform-origin: left bottom; transform-origin: left bottom; width: 100vh; height: 100vw; } } |
Wichtig dabei sind die width und height, damit die Skalierungen korrekt funktionieren. Trotzdem bleiben Einschränkungen: Da man ja immer noch nicht den Browser dreht, sind bspw. Browser-GUI und Keyboard nicht gedreht, außerdem kommt die Standard-Dreh-Animation, wenn man zwischen Fake-Landscape und richtigem Landscape wechselt.
Wenn einen das total nervt, bliebe nur alles aus- und stattdessen einen Hinweis einzublenden, dass man das iPad selber drehen soll.