✔ orientation portrait verhindern

rernanded

rernanded

Erfahrenes Mitglied
Hi

ich will per css durch @media() die portrait-Anzeige grundsätzlich verhindern.
Wie muß ich es anstellen?

MONI
 
Verhindern wird so nicht gehen. Man könnte aber in diesem Format die Anzeige des kompletten Inhalts unterdrücken.
CSS: 
@media (orientation:portrait) { * {display:none} }
PS: Darf man den Grund dafür erfahren, das Hochformat auszuschließen?
 
Zuletzt bearbeitet:
@SpiceLab
Ja darf man wissen. Die gesamte Gestaltung ist auf ein Querformat ausgelegt, vor allem für normale Screens (Desktop).
Eine Adaption in eine schmalere Version ist umständlich bis unmöglich.
Da in den css %-Werte benutzt werden und die Images(zB in dem Slider (s.u.)) auch eher querformatig angelegt sind, sind hochformatige und kleine Screens(Smartphone)
eher eine Zumutung. Entweder werden die Images gestaucht(Lachen wird dann zum Kussmund) oder es ist nur der mittlere Bildausschnitt zu sehen. Oder man sieht oben und unten den background, also ohne Wertangabe weiß oder eben #xxxxxx. Das passiert je nach Bild. Und da geht ja quer so einiges: 1000x2000, 1500x1789 usw.
Und da ich selbst die Bildauswahl nicht bestimme wirds schwierig allem gerecht zu werden.
Vllt. gibts da eine gute Lösung, aber ich glaube eher nicht, da ich schon sehr viel ausprobiert habe.
Deshalb würde ich gerne bei einer Portrait-Version einen Hinweis einblenden: Du kannst die Seite optimal sehen wenn Du Dein Smartphone quer hälst.

MONI

HTML: 
#slider {
position:absolute;
width: 100%;
height: 80%;
left: 0%;
top: 20%;
}
 
rernanded hat gesagt.:
Deshalb würde ich gerne bei einer Portrait-Version einen Hinweis einblenden: Du kannst die Seite optimal sehen wenn Du Dein Smartphone quer hälst.
Zum Vergrößern anklicken....
Also etwas in dieser Art:
HTML: 
<p class="alert">Du kannst die Seite optimal sehen wenn Du Dein Smartphone quer hälst.</p>
CSS: 
@media (orientation:portrait) { * {display:none} p.alert {display:block} }
Und in den übrigen Media Queries / Stylesheets die Klasse .alert verstecken.
 
@SpiceLab Ein Big Smile zurück. Hab den Fehler gemacht <body> aber nicht <html> einzuschließen. p.alert innerhalb des html kann ja dann nicht funktionieren. Super Danke. MONI
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück