Wie nennt man diese Technik?

    Ich habe durch Zufall auf mehreren Webseiten eine Technik gesehen, die ich noch nicht kenne.

    Kurz erklärt...
    Seitenzoom 100%: Webseite wird normal angezeigt.
    zoomt man nun stark rein, so verändert sich das Layout der Webseite!

    Ein gutes Beispiel ist diese Seite von Steam mit einem zufälligem Profil Namens Random :P
    http://steamcommunity.com/id/Random

    Einfach reinzoomen und gucken, wie sich das Layout (rechte Sidebar) verändert.


    Mit JavaScript hat das wohl nichts zu tun, das habe ich schon geprüft.
    Aber wie funktioniert das denn sonst?

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Hallo DerAndere!
    Das Design ändert sich nicht, die Webseite passt sich nur dem Bildschirm des Ausgabegerätes an. Das nennt man Responsives Webdesign.
    Moderne Themes setzen immer mehr auf solch ein Design damit die Webseite auf PC, Tablet und Smartphone gleichermaßen gut angezeigt werden. Dazu ist es manchmal erforderlich dass manche Bereiche der Homepage verschoben werden.

    Gruß Frank

    Also das zählt auch zu Responsives Webdesign. OK. Meine CSS-Dateien habe ich schon für PC und Smartphones aller Art angepasst.

    Nur wenn ich reinzoome, dann werden die Pixel ja nicht weniger.
    Ich habe z.B. u.a. folgendes in meiner CSS stehen

    Code
    @media only screen and (-webkit-device-pixel-ratio: 2),
(-webkit-device-pixel-ratio: 1) and (max-device-width: 768px) { /* ... */ }

    Das natürlich für alle Arten von Bildschirmen (klappt auch sehr gut!).

    Aber das mit dem Zoomen ist mir trotzdem noch suspekt eben wegen "Wenn man zoomt, werden die Pixel des Ausgabegerätes ja nicht weniger".

    Logikproblem! :)

    Wenn rechts kein Platz mehr für die Seitenleiste ist, erfolgt der Layoutwechsel (ein paar Sachen sind bei Steam über jQuery realisiert).

    Der Browserzoom hat den selben Effekt, wie das Verkleinern des Fensters.

    Wie das genau funktioniert kann ich dir jetzt auch nicht sagen. Nur so viel dass das ganze Theme responsive gestaltet sein muss. Wie du dem Wikipediaartikel entnehmen kannst geschieht vor der Auslieferung der Seite eine Kommunikation wo abgefragt wird was für ein Ausgabegerät die Seite anzeigen will, und die Seite dann entsprechend ausgeliefert wird. - So habe ich es zumindest verstanden.

    Mehr kann ich leider nicht dazu sagen.

    Gruß Frank

    Mhhh ok ok, ich glaube langsam zu verstehen - aber nur "wenn rechts kein Platz mehr ist" =)

    Ich sehe schon das Problem auf meiner Webseite. Meine Webseite hat einen Wrapper, der immer X% der Bildschirmbreite einnimmt - egal welcher Zoom-Level.
    Ich denke hier ist es eher angebracht, bei DESKTOP-Browsern einen PIXEL-Wert zu nutzen - sehe ich das richtig?
    Bei Steam sieht es z.B. so aus:

    Code
    body.standard_page {     min-width: [COLOR=#ff0000]958px[/COLOR]; }


    Bei mir so

    Code
    .wrapper { margin:0 auto; width:[COLOR=#ff0000]50%[/COLOR]; }

    Mobile muss ich dann mal gucken... habe zum Glück einen FullHD-Bildschirm und kann in einer VM 1366er-Auflösungen simulieren. Außerdem habe ich ein Samsung S5 Mini und noch ein uraltes Samsung Wave Y. Nur ein Tablet habe ich nicht. Aber das ist unwichtig.

    Einmal editiert, zuletzt von DerAndere (2. Oktober 2015 um 21:15)

    Es reicht, wenn Du das Browserfenster schmal machst. Das reicht zur Layoutkontrolle. ;)

    Umschließende Elementcontainer haben immer eine Breitenangabe in Pixeln, sonst fehlt den "Kindern" jeglicher Bezug (insbesondere hinsichtlich Positionierung). Und diese ändert man dann entsprechend in den media queries.

    Evtl. schaust Du einfach mal in den gängigen Responsive Frameworks nach (Bootstrap, Boilerplate, Foundation, etc.). :)

    Was ist denn grundsätzlich besser?
    Dem wrapper eine feste Breite in Pixeln zu geben oder in Prozent?

    In Prozent ist es natürlich viel einfacher, den wrapper auf verschiedenen Geräten mit wenig Mühe anzeigen zu lassen.

    Es gibt da keine Faustregel, da es auf das Layout und das Projekt selbst ankommt. Viele machen den Fehler und legen eine Technologie zu Grunde, anstatt sich darauf zu konzentrieren, was sie erreichen wollen.

    Wenn Du unbedingt eine prozentuale Angabe verwenden willst, musst Du minimal eine max-width in Pixeln bestimmen.

    Dann solltest Du aber auch beachten, dass border und padding bei der Skalierung nicht berücksichtigt werden. In dem Fall muss jedem Element (*) das box-sizing: border-box verpasst werden, damit border und padding in der Prozentangabe einfließen kann.

    Davon abgesehen solltest Du überlegen, wie die Elemente Deiner Seite verschachtelt werden. Das Hauptelement muss dabei eine Begrenzung haben.

    Alternativ kannst Du Dich auch mit SASS beschäftigen. Vereinfacht insbesondere auch die media queries... http://sass-lang.com/

    Wie gesagt: ein Blick in die bekannten Frameworks beantwortet alle Fragen. ;)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden