Mobile Seite Testen

Hallo Forum,

Ich bin gerade daran meine Navigation für ein Mobiles Endgerät einzurichten. Nun teste ich die Seite normalerweise über die Taste F12, um anschliessend gewissen anpassungen vorzunehmen wenn mir etwas nicht passt.

Wenn ich jetzt z.B. eine Navigation einrichte, welche nur dargestellt werden soll wenn das Endgerät unter 500px breit ist, mache ich das gemäss dessen was ich so gelesen habe am besten mit einem Media Query welches da lautet:

@media screen and (max-width: 500px)

Das funktioniert grundsätzlich auch. Nun wenn ich die Seite über die Funktion F12 anschaue und da die Displaygrösse verändere (unter 500px) wechselt die Darstellung der Webseite nicht sondern bliebt auf dem normalen Layout. Nur wenn ich die Seite tatsächlich mit dem Handy öffne lädt es das Stylesheet mit dem erwähnten Media Query. Mache ich irgendetwas falsch oder kann ich diese Funktion über F12 nicht testen?

Gruss Nico

Nur damit wir sicher sind worüber wir reden: Hast du ein mobiles Seitenlayout angegeben und eventuell nur darin das CSS mit dem Media Query eingebunden? Oder benutzt du KEIN mobiles Seitenlayout und machst alles nur über Media Queries (was wohl die meisten machen)?

Ich mache alles über das selbe seitenlayout und gebe mit den Media Querys an ab wann es welches Stylesheet verwenden soll.

"hahaha soeben wollte ich diesen thread mit "alt + c" speichern und schliessen ;))

Dann sollte das in den Entwicklertools des Browsers funktionieren. Ich teste so in Firefox, Chrome, Opera, Vivaldi, ie11, edge unter Windows 10 und Firefox, Chrome, Safari unter MacOS Sierra.
Zeig doch mal einen Link zur betroffenen Seite, damit man selbst schauen kann.

der link ist:

www.web1109.login-6.loginserver.ch

Die Seite hat mit Fertig noch nichts zu tun also nicht wundern bitte.

Grundsätzlich sollte die Endlösung sein, dass ich oben rechts/links oder wo auch immer einen Menubutton habe - natürlich nur auf mobilen Geräten - welche bei Betätigung ein Menu entweder aufblenden lässt, oder aber auf eine Menuseite verlinked ist -> beispiel contao.org (finde ich schön gemacht)

Naja Gut Ding soll Weile haben... vielen Dank für die Hilfe... ich wünsche euch allen eine schöne Auffahrt!

Nico

Dein Link ist der Login zu Deinem Hosting. Da scheinst Du was verwechselt zu haben.

Es geht um diese Seite? Da sehe ich nur einen Loginbereich.

Wenn ich halt nur das "www" weggelassen hätte... dann würde das auch funktionieren...


http://web1109.login-6.loginserver.ch

Ok... Entwarnung mittlerweile geht diese Funktion einwandfrei.

Jetzt kommt der Punkt an dem ich eben diese Funktion einrichten möchte, durch die die Navigation erst erscheint, nachdem man auf diesen Menu Button geklickt hat. Wenn jemand hierzu einige Tipps anbringen könnte wäre ich äusserst dankbar.

Gruss Nico

Möglichkeiten dafür gibt es fast wie Sand am Meer:

• eine Erweiterung nutzen
• mit javascript - ich setze da mit javascript nur entsprechende Klassen, denn Rest mach ich mit css
• rein mit css und den Pseudoklassen :target bzw. :checked

Was man einsetzt bzw. wie genau man es einsetzt kommt zum einen auf das Projekt an - u.a. wieviel Ebenen werden benötigt und hat die Seite die Unterseiten besitzt eigene Inhalte - und zum anderen auf eigene Vorlieben an. Nicht vergessen sollte man die Semantik und die Probleme mit "zurück" im Browser die z.B. bei der Verwendung von :target auftreten.