WebSite X5Help Center

 
Georg V.
Georg V.
User

Landscape für eine Seite auf Smartphone erzwingen?  de

Author: Georg V.
Visited 1296, 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
8 ANSWERS - 4 USEFUL - 1 CORRECT
Franz-Josef H.
Franz-Josef H.
Moderator

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?

Read more
Posted on the from Franz-Josef H.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... 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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Georg V.
Georg V.
User
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.

Read more
Posted on the from Georg V.
Andreas S.
Andreas S.
Moderator
Best User of the month DE

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.

Read more
Posted on the from Andreas S.
Georg V.
Georg V.
User
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. cry

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.

Read more
Posted on the from Georg V.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT
Georg V.
... ...  .. Der Vorschlag von @KolAsim mit dem Alert erscheint mir sehr gut, übersteigt adhoc aber meine Fähigkeiten. ...  ...  ... 

... 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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Georg V.
Georg V.
User
Author

@KolAsim: super! Herzlichen Dank!

Read more
Posted on the from Georg V.