WebSite X5Help Center

 
Georg V.
Georg V.
User

Landscape für eine Seite auf Smartphone erzwingen?  de

Auteur : Georg V.
Visité 1294, Followers 1, Partagé 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?

Posté le
8 RéPONSES - 4 UTILE - 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?

Lire plus
Posté le de Franz-Josef H.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois 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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Georg V.
Georg V.
User
Auteur

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

Lire plus
Posté le de Georg V.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois 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.

Lire plus
Posté le de Andreas S.
Georg V.
Georg V.
User
Auteur

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

Lire plus
Posté le de Georg V.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois 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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Georg V.
Georg V.
User
Auteur

@KolAsim: super! Herzlichen Dank!

Lire plus
Posté le de Georg V.