Verzerrung auf anderen Laptops

Mr19Michi94 · 14. Mai 2021

Hi,

ich erstelle gerade eine Website für meine Ballettschule. Im CSS habe ich alle Angaben in Prozent gemacht (selbst die Schriftgröße ist in "vh"). Das oberte div-Element bekommt die Breite in Abhängigkeit von der Höhe des Bildschirms (var width = screen.height * 1.413;), weil ich halt wollte, dass die Seite schön in der Mitte des Bildschirms liegt und die Seite ausfüllt und nicht so langweilig oben links beginnt oder zu klein oder zu groß ist und man dann scrollen muss (siehe Foto).

html-seminar.de/woltlab/attachment/3085/

Ich hab jetzt zwei Probleme damit.

1. Ich hab das alles so optimiert, dass es auf meinem Laptop gut ausschaut und dachte, dass es bei anderen auch gut ausschauen müsste, weil ja im Endeffekt alles von screen.height abhängt, aber wenn eine Freundin die Seite aufruft, ist die Schrift in dem Bild oben zu klein und geht also über die Holme von der Stange, alle anderen Proportionen passen, nur die Labels wie gesagt nicht. Ich habe Schriftgröße schon mit "px", "%" und "vh" probiert (bei "vh" hängt es dann auch davon ab, ob z.B. eine Lesezeichenliste oben im Browser geöffnet ist).

2. Auf Handy und Tablet schaut es nur grauenvoll aus (siehe nächste Bilder)

html-seminar.de/woltlab/attachment/3090/ ... wenn ich die Seite bei senkrechtem Bildschirm lade

html-seminar.de/woltlab/attachment/3091/ ... wenn ich die Seite bei waagrechtem Bildschirm lade

html-seminar.de/woltlab/attachment/3092/ ... wenn ich dann das Handy senkrecht und wieder waagrecht kippe (wie kann das eigentlich sein?)

Kann man das irgendwie noch hinkriegen? Oder muss ich doch alles mit festen Pixelwerten machen und "oben links" in die Mitte des Bildschirms legen und dann noch negative Margin-Werte drauf?

Schon mal herzlichen Dank euch!

Grüße

Michael

Sempervivum · 14. Mai 2021

Hallo Michael, das kann man ganz sicher hinkriegen aber man muss dazu das HTML und CSS sehen. Poste am besten die URL der Seite.

m.scatello · 14. Mai 2021

Zitat von Sempervivum

Poste am besten die URL der Seite.

Kann man im ersten eingefügtem Bild ablesen.

Sempervivum · 14. Mai 2021

Ups, nicht gesehen, danke!

Sempervivum · 14. Mai 2021

Ich habe mir das jetzt mal angesehen und schlage folgendes Vorgehen vor: Entwerfe zunächst ein Layout auf eine Weise, wie man es i. allg. (und zu Recht) nicht macht: Einen Container außen herum mit genau den Pixelabmessungen des Hintergrundbildes, damit das zunächst mal nicht skaliert wird. Und darin dann das Layout mit der Schrift, so dass es genau hinein passt.

Wenn das fertig ist, passen wir das nach der contain-Methode in das Browserfenster ein, d. h. entweder seitlich oder oben und unten bleibt Luft wenn das Seitenverhältnis nicht passt. Das machen wir mit transfrom: scale(); und den Faktor berechnen wir mit Javascript.

Allerdings wird das dann auf dem Handy nicht passen und wir müssen u. U. ein zweites Layout für das Hochformat machen, auch etwas was man i. allg. nicht macht. Aber wir wollen das ja erhalten, dass sich der Text rechts an die Tänzerin anschmiegt.

tk1234 · 14. Mai 2021

Zitat von Mr19Michi94

ich erstelle gerade eine Website für meine Ballettschule. Im CSS habe ich alle Angaben in Prozent gemacht (selbst die Schriftgröße ist in "vh").

Das mit der Schriftgröße ist falsch. Die Schriftgröße darf nicht von der Höhe des Viewports abhängen: bei niedriger Höhe ist sie zu groß, bei kleiner Höhe zu klein - zumindest clamp() müsstest du da verwende, wirklich sinnvoll ist das aber auch nicht, verwende (r)em.

Zitat

Das oberte div-Element bekommt die Breite in Abhängigkeit von der Höhe des Bildschirms (var width = screen.height * 1.413;), weil ich halt wollte, dass die Seite schön in der Mitte des Bildschirms liegt und die Seite ausfüllt und nicht so langweilig oben links beginnt oder zu klein oder zu groß ist und man dann scrollen muss (siehe Foto).

Wie du gemerkt hast, funktioniert das so nicht. Vor allem solltest du das Javascript ersatzlos löschen: das was du da zu berechnen versuchst kann CSS auch direkt.

Zitat

Kann man das irgendwie noch hinkriegen?

Möglicherweise. Allerdings erstmal: du verwechselst Webdesign mit Printdesign. Bei letzterem kann man pixelgenau sagen wo was stehen soll, bei ersterem geht das nicht, dafür sind die Endgeräte auf denen Seiten betrachtet werden können einfach zu unterschiedlich. Deswegen sollten Inhalte Grundsätzlich erstmal in die Elemente gepackt werden die semantisch passend sind - was bei dir überhaupt nicht der Fall ist: du verwendest immer nur <div> statt <header>, <main>, <footer>, <nav> mit <ul>/<li> drin usw.. Auch <label> ist hier falsch sowie sämtliches inline-CSS (das Javascript erwähnte ich ja schon).

Dein Problem ist erstmal dass deine Konstruktion einfach nicht auf kleine Displays passt (wenn der Text noch lesbar sein soll), du wirst also nicht drumrum kommen verschiedene Layouts je nach vorhandenem Platz zu erstellen, media Querys helfen dir dabei. Wichtig: der Inhalt der Seite muss erst in vernünftiges HTML gepackt werden, erst dann kann es an die Formatierung gehen - und die Breakpoints der media Querys in em, nicht in Pixeln!

Um den Text dann um das Bild fließen zu lassen brauchst du wirklichen Fließtext, also ohne <br> darin. Ich habe noch nie damit gearbeitet, aber dir sollten die shape-Eigenschaften helfen, damit lassen sich Formen definieren die von Text umflossen werden. Aber wie gesagt: verabschiede dich von der Vorstellung dass es überall exakt so aussieht wie bei dir!

Zitat von Sempervivum

Ich habe mir das jetzt mal angesehen und schlage folgendes Vorgehen vor: Entwerfe zunächst ein Layout auf eine Weise, wie man es i. allg. (und zu Recht) nicht macht: Einen Container außen herum mit genau den Pixelabmessungen des Hintergrundbildes, damit das zunächst mal nicht skaliert wird. Und darin dann das Layout mit der Schrift, so dass es genau hinein passt.

Vergiss es. Du kannst im Webbereich keine Texte so formatieren dass sie immer exakt gleich aussehen - da brauch nur jemand mit einer anderen Schriftart kommen, dann sieht es schon wieder (minimal) anders aus. Es hat schon seinen Grund warum Layouts nicht mehr festzementiert werden - das funktioniert einfach nicht mehr seit das Internet auch auf mobilen Geräten verfügbar ist (und auch vorher hat es schon nicht wirklich funktioniert).

Mr19Michi94 · 14. Mai 2021

Herzlichen Dank schonmal, ich denke, dann hab ich ja erstmal zu tun. Ich melde mich wieder, wenn noch ne Frage aufkommt oder alles passt

Sempervivum · 15. Mai 2021

Ich habe meinen Vorschlag mal umgesetzt. Da verschiebt sich nichts. Getestet in Opera, FF, Chrome und Edge. Auf Safari habe ich leider keinen Zugriff.

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8" />
    <title>
        Ballettschule
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />

    <style>
        html,
        body {
            font-size: 16.5px;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        body {
            margin: 0;
            background-color: #FEF6EB;
        }

        #wrapper {
            box-sizing: border-box;
            width: 1086px;
            height: 537px;
            background-image: url(images/pecheuse_co6.png),
                linear-gradient(to bottom, #CAB7F9 0%, #CAB7F9 75%,
                    #AC8CF9 75%, #AC8CF9 90%, #6E5AA1 90%);
            background-size: 100% 100%, 80% 80%;
            background-position: center center, center center;
            background-repeat: no-repeat;
            display: flex;
            justify-content: flex-end;
            padding: 60px 120px;
            transform-origin: left top;
        }

        #text {
            box-sizing: border-box;
            width: 80%;
            padding-right: 50px;
            font-style: italic;
        }

        #text2 {
            padding-left: 60px;
        }

        #text3 {
            padding-left: 100px;
        }

        #text4 {
            padding-left: 130px;
        }

        #text5 {
            padding-left: 160px;
        }

        #text6 {
            padding-left: 190px;
        }

        #text7 {
            padding-left: 220px;
        }

        #text9 {
            padding-left: 160px;
            font-size: 1.5em;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="text">
            Zünachst möchte ich all diejenigen herzlich begrüßen, deren Interesse am
            klassischen Ballett geweckt wurde.<br>
            Mein Name ist Kerstin Fischer und bin gebürtige Hoferin (Oberfranken).
            Meine Mutter nahm mich als Dreijährige mit zum Ballettunterricht, und das
            prägte mein Leben ebenso wie z.B. die Komposition Coppélia von Delibes
            und Saint-Léon. Es folgte meine vierjährige Ballettausbildung für Bühnentanz,
            an der Ballettakademie Hans Vogl, in Berlin. Die Ballettschule Pêcheuse im
            Stadtkern Würzburg wurde 2009 gegründet.
            <div id="text2">Unsere Schüler/innen lernen den klassischen Tanz nach der Russischen</div>
            <div id="text3">Methodik. Der Stundenplan ist nach Schwierigkeitsgrad und</div>
            <div id="text4">individuellen Zielen der Schüler/innen, die derzeit zwischen 5 und</div>
            <div id="text5">76 Jahren sind, aufgebaut. Ganz gleich welchen Alters Ihr seid -</div>
            <div id="text6">wenn Ihr die Liebe zum Ballett spürt oder diese bereits tief</div>
            <div id="text7">verankert ist - ermutige ich Euch, euren Traum zu leben.</div>
            <div id="text8">Ihr seid herzlich willkommen!</div>
            <div id="text9">Kerstin Fischer</div>
        </div>
    </div>
    <script>
        function resizeIt() {
            const wObj = 1086, hObj = 537,
                ratioObj = wObj / hObj,
                wViewport = document.documentElement.clientWidth,
                hViewport = document.documentElement.clientHeight,
                ratioViewport = wViewport / hViewport,
                wrap = document.getElementById('wrapper');
            if (ratioObj > ratioViewport) {
                factor = wViewport / wObj;
                wrap.style.marginTop = (hViewport - hObj * factor) / 2 + 'px';
                wrap.style.marginLeft = '0px';
            } else {
                factor = hViewport / hObj;
                wrap.style.marginLeft = (wViewport - wObj * factor) / 2 + 'px';
                wrap.style.marginTop = '0px';
            }
            wrap.style.transform = 'scale(' + factor + ',' + factor + ')';
        }
        resizeIt();
        window.onresize = resizeIt;
    </script>
</body>

</html>

Alles anzeigen

tk1234 · 15. Mai 2021

Zitat von Sempervivum

Ich habe meinen Vorschlag mal umgesetzt. Da verschiebt sich nichts. Getestet in Opera, FF, Chrome und Edge. Auf Safari habe ich leider keinen Zugriff.

Ein gutes Beispiel wie man es nicht machen soll, die "Lösung" hat einige Probleme/Nachteile:

Wenn ich in Vivaldi (Blink-Engine) eine Mindestschriftgröße setzte, zerreißt es das Layout (Firefox ignoriert eine Mindestschriftgröße was auch nicht für die Seite spricht)
In Firefox zerreißt es aufgrund der verwendeten Schriftart das Layout da die eingerückten Zeilen nicht mehr in ihre Zeilen passen und jeweils die letzten Worte in eine neue Zeile rutschen:
html-seminar.de/woltlab/attachment/3093/
selbst wenn man eine Schriftgröße vorgibt kann man sich nicht sicher sein dass die auch überall verwendet wird: nicht jedes Gerät hat jede Schriftgröße
das Skalieren der Seite funktioniert weder in Vivaldi noch in Firefox - ein No-Go
Screenreader (zumindest Orca, bei anderen wird das wohl genauso sein) machen nach jeder der eingerückten Zeilen eine Pause als wäre da ein Satz zu Ende
Die Abstände zwischen Tänzerin und Text sind in Vivaldi und Firefox unterschiedlich und (durch den falsch umbrochenen Text in Firefox) in beiden nicht ideal
Ohne Javascript wandert der Text nach rechts aus dem sichtbaren Bereich raus - ohne dass man scrollen kann
(die Schriftgröße hängt von der Breite des Fensters ab und wird bei schmalen Fenstern sehr klein. Dass aber für sehr kleine Fenster eine andere Lösung erforderlich ist, schriebst du ja oben schon - das wird ohnehin immer so sein, das Layout lässt sich auf kleinen Displays einfach nicht vernünftig umsetzen)

Lange Rede, kurzer Sinn: Michael, verwende das nicht: die Variante ist eine nette Spielerei, taugt für die Praxis aber nichts und sollte gleich wieder fachgerecht entsorgt werden.

Sempervivum · 15. Mai 2021

Habe jetzt auch die Menüs und eine Handyversion gemacht :

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8" />
    <title>
        Ballettschule
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />

    <style>
        html,
        body {
            font-size: 16.5px;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        body {
            margin: 0;
            background-color: #FEF6EB;
        }

        #wrapper {
            box-sizing: border-box;
            width: 1086px;
            height: 537px;
            background-image: url(images/pecheuse_co6.png), linear-gradient(to bottom, #CAB7F9 0%, #CAB7F9 75%, #AC8CF9 75%, #AC8CF9 95%, #6E5AA1 95%);
            background-size: 100% 100%, calc(100% - 200px) calc(100% - 40px);
            background-position: center center, center center;
            background-repeat: no-repeat;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 20px 100px;
            transform-origin: left top;
        }

        #text {
            box-sizing: border-box;
            /* width: 80%; */
            padding-right: 50px;
            padding-left: 150px;
            padding: 40px 50px 10px 150px;
            font-style: italic;
        }

        #text2 {
            padding-left: 60px;
        }

        #text3 {
            padding-left: 110px;
        }

        #text4 {
            padding-left: 140px;
        }

        #text5 {
            padding-left: 160px;
        }

        #text6 {
            padding-left: 180px;
        }

        #text7 {
            padding-left: 200px;
        }

        #text9 {
            padding-left: 150px;
            font-size: 1.5em;
        }

        @media (max-width: 750px) {
            div[id*="text"] {
                padding-left: 0 !important;
                width: 100% !important
            }

            div#text {
                padding: 0;
            }

            #text2,
            #text3,
            #text4,
            #text5,
            #text6,
            #text7 {
                display: inline;
            }

            #wrapper {
                width: 100%;
                min-height: 100%;
                height: auto;
                background-image: url(images/pecheuse_co6.png),
                    linear-gradient(to bottom, #CAB7F9 0%, #CAB7F9 100%);
                background-size: contain, 80% calc(100% - 40px);
                background-position: center top, center calc(100% - 20px);
                padding: 20px 10%;
            }

            #shape {
                shape-outside: ellipse(30vw 25vw at 0 20vw);
                height: 50vw;
                width: 50vw;
                float: left;
            }
        }

        nav ul {
            display: inline-flex;
            padding: 0;
            margin: 0;

        }

        nav li {
            list-style: none
        }

        #nav-top {
            margin-top: auto;
            text-align: right;
            margin-right: 2em;
            font-size: 1.4em;
            font-style: italic;
        }

        #nav-top li {
            color: #660088;
            padding: 0 0.3em 1.4em 0.3em;
        }

        #nav-bottom {
            text-align: right;
        }

        #nav-bottom li {
            color: #a0a0a0;
            padding: 0.2em 0.3em;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="inner">
            <div id="shape">
            </div>
            <div id="text">
                Zünachst möchte ich all diejenigen herzlich begrüßen, deren Interesse am
                klassischen Ballett geweckt wurde.<br>
                Mein Name ist Kerstin Fischer und bin gebürtige Hoferin (Oberfranken).
                Meine Mutter nahm mich als Dreijährige mit zum Ballettunterricht, und das
                prägte mein Leben ebenso wie z.B. die Komposition Coppélia von Delibes
                und Saint-Léon. Es folgte meine vierjährige Ballettausbildung für Bühnentanz,
                an der Ballettakademie Hans Vogl, in Berlin. Die Ballettschule Pêcheuse im
                Stadtkern Würzburg wurde 2009 gegründet.<br>
                <div id="text2">Unsere Schüler/innen lernen den klassischen Tanz nach der Russischen</div>
                <div id="text3">Methodik. Der Stundenplan ist nach Schwierigkeitsgrad und</div>
                <div id="text4">individuellen Zielen der Schüler/innen, die derzeit zwischen 5 und</div>
                <div id="text5">76 Jahren sind, aufgebaut. Ganz gleich welchen Alters Ihr seid -</div>
                <div id="text6">wenn Ihr die Liebe zum Ballett spürt oder diese bereits tief</div>
                <div id="text7">verankert ist - ermutige ich Euch, euren Traum zu leben.</div>
                <div id="text8">Ihr seid herzlich willkommen!</div>
                <div id="text9">Kerstin Fischer</div>
            </div>
        </div>
        <nav id="nav-top">
            <ul>
                <li>Pêcheuse</li>
                <li>Stundenplan</li>
                <li>Galerie</li>
                <li>Kontakt</li>
                <li>Aktuelles</li>
            </ul>
        </nav>
        <nav id="nav-bottom">
            <ul>
                <li>Home</li>
                <li>Impressum</li>
                <li>Datenschutz</li>
            </ul>
        </nav>
    </div>
    <script>
        function resizeIt() {
            const wObj = 1086, hObj = 537,
                ratioObj = wObj / hObj,
                wViewport = document.documentElement.clientWidth,
                hViewport = document.documentElement.clientHeight,
                ratioViewport = wViewport / hViewport,
                wrap = document.getElementById('wrapper');
            if (wViewport > 750) {
                if (ratioObj > ratioViewport) {
                    factor = wViewport / wObj;
                    wrap.style.marginTop = (hViewport - hObj * factor) / 2 + 'px';
                    wrap.style.marginLeft = '0px';
                } else {
                    factor = hViewport / hObj;
                    wrap.style.marginLeft = (wViewport - wObj * factor) / 2 + 'px';
                    wrap.style.marginTop = '0px';
                }
                wrap.style.transform = 'scale(' + factor + ',' + factor + ')';
            } else {
                wrap.style.marginTop = 'unset';
                wrap.style.transform = 'scale(1)';
            }
        }
        resizeIt();
        window.onresize = resizeIt;
    </script>
</body>

</html>

Alles anzeigen

tk1234 · 16. Mai 2021

Zitat von Sempervivum

Habe jetzt auch die Menüs und eine Handyversion gemacht :

Herzlichen Glückwunsch, damit hast du den letzten Punkt behoben, die restlichen Problem bestehen (bei teilweise leicht verändertem Verhalten) weiterhin.

Wie ich in #6 schon schrieb: als erstes muss das HTML in Ordnung gebracht werden: div#wrapper ist überflüssig, ein Element in dem alles steht gibt es bereits: body; die div#text* gehören in *ein* p damit der Text frei fließen kann, die beiden Absätze darüber ebenfalls je in ein p. Wenn das dann in Ordnung gebracht ist, kann man anfangen das vernünftig zu machen - aber mit den shape-Eigenschaften, nicht mit scale()! Wobei ich nur für große Displays mit shape arbeiten würde, kleine Displays sind zu klein als das das gut aussieht.

PS: Pixel ist als Einheit für die Schriftgröße (und sonst auch fast immer) immer noch falsch.

Verzerrung auf anderen Laptops

Jetzt mitmachen!

Teilen

Tags