Landscape für eine Seite auf Smartphone erzwingen? 
Author: Georg V.
Visited 825,
Followers 1,
Shared 0
Ich habe eine Seite, die ich auf dem Smartphone nur im landscape vernünftig darstellen kann. Die Mittel zur Optimierung der responsiven Darstellung helfen hier leider nicht weiter.
Gibt es eine Möglichkeit die Darstellung dieser Seite im landscape Modus per code zu erzwingen? D.h. der Benutzer öffnet die Seite im Porträt und die Darstellung wechselt automatisch ins Querformat?
Posted on the
Mit folgendem Code in Schritt 1 "Einstellungen" Auswahl "Statistiken und Code" im Bereich "Code" im "Benutzerdefinierter Code" bei der Auswahl "vor dem </HEAD> Tag" wird die Darstellung ab 719px zwar gedreht auf landscape gestellt, aber für Auflösungen ab 640px wieder zurück auf portrait.
<style>
@media screen and (min-width: 180px) 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;
}
}
</style>
So wie es aussieht, wird diese Einstallung automatisch für die "kleinen" Auflösungen verhindert. Aber vielleicht hat der Sezialist KolAsim eine Idee?
... ciao ... (It > De) ... ... vielleicht könnten Sie ein JS-Steuerelement auf die Bildschirmerkennung setzen und ein Alert oder eine Warnung in einem Dialogfeld anzeigen, um Sie zu warnen, horizontal zu drehen...
... aber meiner Meinung nach ist es viel besser, das Layout in den verschiedenen Haltepunkten gut zu ordnen; ...in der v.PRO sind es 10 und für alle Auflösungen verfügbar...
.
ciao
.
Author
@Franz-Josef H.: leider wird mit dem code nur die Portät-Darstellung gedreht, das hilft mir hier nicht weiter. Trotzdem Danke!
@KolAsim: Danke! Die Idee, den Benutzer darauf hinzuweisen, hatte ich auch schon. Allerdings fehlt mir dazu das Wissen, wie ich das umsetzen kann. Wie gesagt, eine Optimierung des Layouts hilft mir hier nicht weiter, da nur das Gesamtbild die gewünschte Information vermittelt.
Anbei screenshots der entsprechenden Darstellungen.
Meinst du jetzt eine Tabelle wo die Daten dann darunter angezeigt werden? Mir ist der Begriff" landscape" nicht ganz klar gewesen.
Jedenfalls ein Bild das hochformat gespeichert wurde, kann nicht umgewandelt werden in Breitformat ohne dass sich das bild nicht "streckt"! Anders herum würde dann ein Spalt oben und unten entstehen.
Author
@Andreas S.:Die angehangenen screenshots zeigen das aktuelle Verhalten. Portät ist die Darstellung beim senkrecht gehaltenen Smartphone und Landscape beim quer gehaltenen. Ursprünglich war es eine Tabelle die mir Google aber als "Nutzerunfreundlich" anmeckert, weil "Inhalt breiter als Bildschirm". Deshalb anderen Ansatz versucht.
Live zu sehen: strawberryfield-aussies.de/testpedigree.html
Nun muss ich den Nutzer nur dazu bringen sein Smartphone quer zu halten.
Erzwingen der Darstellung im Querformat scheint wohl nicht möglich zu sein.
Der Vorschlag von @KolAsim mit dem Alert erscheint mir sehr gut, übersteigt adhoc aber meine Fähigkeiten.
Tooltip ginge ev. auch, wenn man ihn nur auf die entsprechende Auflösung setzen könnte.
... versuchen Sie diesen Code (< 600px):
<style>
@media(max-width:600px) {
body::after {content:" horizontale Ausrichtung wird für Smartphones empfohlen ";
position:fixed;text-align:center;top:0px;width:100%;padding-top:20px;padding-bottom:20px;font-size:30px;background-color: rgba(255, 255, 0, 0.8);color:red;
-webkit-animation: fadeoutK 6s linear 1 forwards; animation: fadeoutK 6s linear 1 forwards;opacity: 1}}
@-webkit-keyframes fadeoutK {
0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; }}
@keyframes fadeoutK {
0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; }}
</style>
.
ciao
.
+ + ... füge meinen Code in die Eigenschaften der Seite in diesem Abschnitt ein:
>> Schritt 3 - Sitemap > 'Eigenschaften der Seite' Fenster > ▪Benutzerdefinierter Code: > 3^(dritte) Option > Vor dem </HEAD> Tag
.
ciao
.
Author
@KolAsim: super! Herzlichen Dank!