✔ Homepage auf mobilem Gerät anzeigen

[Rucksack]

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 sorry falls ich wichtige infos vergessen habe. Ich nutze Wordpress.

Grüße Rucksack

 

[SpiceLab]

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.

• https://wiki.selfhtml.org/wiki/CSS/Media_Queries
• https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/display#Die_display-Eigenschaft

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

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


CSS-Framework:

Bootstrap stellt grundsätzlich spezielle (vordefinierte) Hilfsklassen für die einzelnen Ausgabemedien/Viewportbreiten bereit, ab wann ein Element un-/sichtbar sein soll:

• https://getbootstrap.com/css/#responsive-utilities > https://getbootstrap.com/css/#responsive-utilities-tests
• http://holdirbootstrap.de/css/#responsive-utilities > http://holdirbootstrap.de/css/#responsive-utilities-tests

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:

• https://getbootstrap.com/components/#navbar-default
  
• http://holdirbootstrap.de/komponenten/#navbar-default

Ich nutze Wordpress.

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

• https://wp-styles.de/wordpress-bootstrap-theme-einbinden-73/
• https://www.dermatz.de/wordpress-mit-bootstrap-verbinden/
  
• https://bootstrapwp.com/
• http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial
• https://strato.de/blog/bootstrap-navigation-wordpress/
• ...

[edit]Tipp-Ex[/edit]​

 

[Rucksack]

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