✔ orientation portrait verhindern
- Themenstarter rernanded
- Beginndatum
rernanded
Erfahrenes Mitglied
@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
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%;
}
SpiceLab
ZENmechanic
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} }SpiceLab
ZENmechanic
Der universelle *-Selektor zuvor schließt selbstverständlich auch <html> und <body> ein
CSS:
html,body,p.alert {display:block}
