@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}Eingereicht von Andreas Gotfredsen.
Ich habe gerade damit herumgespielt, aber noch keinen vollständigen Erfolg erzielt. Die vw- und vh-Einheiten scheinen sich immer noch auf die ursprüngliche Hochformat-Ausrichtung zu beziehen, so dass jedes Layout, das mit diesen Einheiten erstellt wurde, kaputt geht. Idealerweise könnten wir vw und vh austauschen, wenn die Seite gedreht wird, aber ich konnte keinen Weg finden, das zu tun. Eine Umgehungslösung wäre, –vw und –vh Variablen zu definieren und sie für jede Ausrichtung entsprechend einzustellen, aber dann stecken wir bei der Verwendung mit der umständlichen calc()/var() Syntax fest.
Chris, wir haben jetzt die Screen Orientation API, siehe https://w3c.github.io/screen-orientation/
screen.orientation.lock('portrait')
screen.orientation.lock('landscape')
screen.orientation.unlock()
Aber das funktioniert nicht für alle Browser
Ich erhalte die folgende Fehlermeldung, wenn ich versuche, sie in Google Chrome auszuführen.
Uncaught (in promise) DOMException: screen.orientation.lock() ist auf diesem Gerät nicht verfügbar.
Diese
screen.orientation.lock()API wird nur in FF auf Mobilgeräten unterstützt...Einfache Lösung... fügen Sie einfach height: 100vw hinzu;
+1, habe 'height: 100vw;' hinzugefügt und das oben funktioniert perfekt!
Wie kann ich es deaktivieren? Mein Telefon, ein OPPO F1 Plus, dreht sich nicht mehr, auch wenn ich die Bildschirmdrehung einschalte. Vielen Dank im Voraus für Antworten.
Das kannst du nicht, du musst ein neues Handy kaufen.
Ein Coder hat das auf meiner Website implementiert, und ich möchte es nicht dort haben. Wie entferne ich es? In welcher Datei muss ich suchen, um es zu finden und zu löschen?
Es wäre in einer der CSS-Dateien des Projekts.
Ich habe damit in Safari iOS 12.2 keinen Erfolg.
Ich habe damit in Chrome Mobile keinen Erfolg – Gibt es eine kürzliche Änderung?
Wunderbar! Aber wie mache ich das, wenn: transform: rotate(90deg)?
transform: rotate(90deg);
transform-origin: right top;
width: 100vh;
height: 100vw;
overflow-x: hidden;
position: absolute;
top: 100%;
right: 0;
max-width muss 895px oder mehr für ein Pixel 4a Telefon betragen.
max-width muss 895px oder mehr für ein Pixel 4a Telefon betragen.
Warum ist min-width notwendig?
Was ist mit Touchscreen-Laptops, die 640×480 wählen?
Ist es in einer Media Query möglich, width > height anzugeben?