1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Homepage auf mobilem Gerät anzeigen

Dieses Thema im Forum "Content Management Systeme (CMS)" wurde erstellt von Rucksack, 2. April 2017.

  1. Rucksack

    Rucksack Grünschnabel

    Guten Morgen an alle,

    ich hoffe mal, dass ich mit der Frage hier im richtigen Bereich bin.

    Folgendes Szenario... eine Homepage wird auf Notebooks/Rechnern wunderbar angezeigt, die Navigationsleiste für die Bereiche etc. alles super. Nun möchte ich folgendes machen. Sobald jemand mit einem Handy auf die Homepage geht möchte ich, dass nur eine Seite angezeigt wird mit Buttons für FB, Twitter, Instagram etc. und dass die Navigationsleiste in meinem Fall ein Dropdown Menü ausgeblendet wird.

    Wie ihr sicherlich schon merkt - ich bin komplett neuling in diesem Bereich :D sorry falls ich wichtige infos vergessen habe. Ich nutze Wordpress.

    Grüße Rucksack
     
  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Willst Du es in "Eigenregie/Handarbeit" umsetzen, oder lieber auf ein CSS-Framework, wie z.B. Bootstrap zurückgreifen, das speziell für "Responsive Webdesign" (siehe https://de.wikipedia.org/wiki/Responsive_Webdesign) aufgestellt ist, und somit auch diesen praxisüblichen Anwendungsfall im Paket hat, und dem Entwickler Zeit für anderes lässt, weil es ihm diese Arbeit komplett abnimmt?

    Neben dem Verstecken oder der Re-Strukturierung diverser Seitenbereiche gibt es schließlich noch weitere Aspekte, die für mobile Geräte zu beachten sind, und Bootstrap auf dem Schirm hat, denn ihr Motto lautet: "Mobile first" :)

    Also dann..., Deine freie Entscheidung.

    Do-it-Yourself:

    Mittels CSS Media Queries wird ein sog. Breakpoint festgelegt (z.B. die Maximal- oder Mindestbreite des Displays/Viewports), an dem das Element mit Hilfe der CSS-Eigenschaft display:none|block versteckt|sichtbar wird.
    Ergebnis: https://jsfiddle.net/SpiceLab/qfqz2pgv/ (im Frame rechts unten)

    In dem Fiddle demonstriere ich zwei denkbare Herangehensweisen, entweder über max-width (Maximalbreite), oder min-width (Mindestbreite) die Sichtbarkeit des Elements zu steuern - bis zu 639px ist das Element unsichtbar, ab 640px wird es sichtbar. Die Zahlenwerte sind natürlich frei gewählt und austauschbar :D

    Das JavaScript dient lediglich dazu, im Footer die aktuelle Viewportbreite anzuzeigen - zur Orientierung und Gegenkontrolle :cool:


    CSS-Framework:

    Bootstrap stellt grundsätzlich spezielle (vordefinierte) Hilfsklassen für die einzelnen Ausgabemedien/Viewportbreiten bereit, ab wann ein Element un-/sichtbar sein soll:
    Weil's sich hier aber um die Navigation dreht, gibt's dafür auch eine spezielle Lösung, wie man sie mittlerweile von vielen Seiten kennt (auch hier im Forum).

    Die Menüpunkte verschwinden auf kleinen Ausgabemedien, und werden durch das sog. "Hamburger-Menu-Icon" ersetzt:

    Für den Fall, dass die Bootstrap-Demos das Interesse geweckt haben, hier ein paar Linkempfehlungen :cool:

    [edit]Tipp-Ex[/edit]
     
    Zuletzt bearbeitet: 2. April 2017
  3. Rucksack

    Rucksack Grünschnabel

    Vielen Dank für die Antworten. Sorry, dass ich mich jetzt erst melde - hatte viel um die Ohren.
    Hat sehr gut geklappt. Vielen dank nochmal :)
     
Die Seite wird geladen...