• Sempervivum ich brauche eine Lösung die mit allen brownsern läuft. Ich habe irgendwo gelesen, dass es Viewport auch in CSS gibt und dass man da die Seite im querformat anderst anzeigen kann, wie im hochkanntformat.


    Ich habe eine Seite gebastelt, die zufälligerweise etwas macht, was das tut was die Seite https://diyhomeenergy.com/Syst….Kw7Sb3pHRMq3cKD4dZ1D3g.0 kann. Meine Seite kann das aber nicht nur mit einem feststehenden Background-image, sondern mit einer feststehenden slideshow Seite als hintergründbild. Man kann Inhalte die weiter unten auf der Seite sind über die Slideshow scrollen. Trotz, dass die Slideshow wie ein festes hintergrundbild angezeigt wird ist alles auf ihr aktiv.. Man kann zum Beispiel das Menü öffnen was neben der slideshow angezeigt wird. Wenn man nach unten scroll bleibt die Slideshow auf dem Bildschirm und eine Box wird über die Seite geschoben. mail2vip.com/test3


    Da das per Zufall so ist, kann ich nichnachvollziehen wie das entsteht. Ich habe auch bis jetzt nicht herausgefunden, warum die Seite im Portrait Format gut angezeigt wird, aber im Landscape Format ist nur der obere Teil der Seite zu sehen


    Ich gehe davon aus dass das so ist weil das Bild feststeht und in der initial Grösse zu gross ist. Ich habe mit dem html Viewport versucht das Bild auf die initial Grösse 1 zu setzen und den Zoom Bereich von 0.5 bis 2 einzustellen... aber das geht bis jetzt nicht: man kann das Bild nur vergrössern, nicht verkleinern.


    Danke.,

    Brainstuff

  • Zitat

    Ich habe irgendwo gelesen, dass es Viewport auch in CSS gibt und dass man da die Seite im querformat anderst anzeigen kann, wie im hochkanntformat.

    Dann bin ich mir ziemlich sicher, dass das, was Du gelesen hast, "orientation" war und dann trifft darauf die Einschränkung zu, dass es nicht von allen Browsern unterstützt wird. Wenn Du sicher gehen willst, dass es in allen Browsern funktioniert, dann ermittle die Orientierung mit Javascript und weise den betr. Elementen eine geeignete Klasse zu. Damit kannst Du sie dann mit CSS gestalten.

  • ??

    https://caniuse.com/#search=css3%20media%20queries


    dies erkennt doch selbst ein ie9:

    Code
    1. @media (min-aspect-ratio: 4/3) {

    dein link oben ist doch die js Lösung welche nicht ohne fallback gemacht werden darf:

    Code
    1. screen.orientation.addEventListener("change", () => { //dies wird nicht von allen unterstützt

    das beim scrollen Sachen stehen bleiben erreicht man ganz einfach mit css


    position:fixed;

    statt mit

    position:absolute;