Mobile Ansicht funktioniert nicht...!?

[hannover96xd]

Moin,

ich habe diese Seite hier: http://multicultipage.bplaced.net/

Nun das Problem: Wenn ich die Browser Breite verändere und unter X px komme, dann wird das Menü verkleinert, sodass man dann auf diesen "Button" klicken muss um die Punkte des Menüs zu sehen. Hier klappt es so, wie ich es will.

Wenn ich nun aber mit meinem Handy auf die Website gehe wird das so nicht angezeigt (wie im Browser).....

Muss ich deswegen eine extra CSS-Mobil Datei anlegen? Eigentlich müsste das doch auch mit @media (max-width: "") gehen, oder?

Was mache ich falsch?


l.g.


hannover96xd

 

[Nocturnex]

Also ich fasse mal zusammen: Der rechte Abschnitt ist auf der mobilen Seite nicht sichtbar. Ich kann dir grad nicht sagen woran das liegt. Hast du es schonmal mit dem Meta-Tag "Viewport" probiert? Sollte solche Probleme eigentlich vermeiden, da alles immer auf der Bildschirmbreite dargestellt wird (zoomen ist damit aber mit Problemen verbunden).
Nur mal so am Rande: für Mobilgeräte ist eine einspaltige Ansicht wesentlich komfortabler. Ich würde dir empfehlen für alle Geräte mit kleiner Bildschirmauflösung (QVGA etc.) eine extra Datei zu erstellen (Layout etc.) ansonsten müsste es mit dem Viewport (muss ich gleich mal raussuchen) funktionieren.

 

[hannover96xd]

Der rechte Abschnitt ist auf der mobilen Seite nicht sichtbar.

Das ist bewusst so, weil es sonst zu eng wird.

Nur mal so am Rande: für Mobilgeräte ist eine einspaltige Ansicht wesentlich komfortabler.

Deswegen habe ich es auch mit @media gemacht, damit dann der rechte, zweite abschnitt bei X px weg ist...


EDIT:
Wenn ich nun die handheld css Datei eingebunden habe, wie kann ich es mir dann offline angucken?
Es ist ja ein bisschen umständlich sich das ganze immer hochzuladen, um es dann online anzugucken.

Also kurz gesagt, wo muss ich das mobil. hinsetzen? (offline)

 

[Trüffelkrieger]

Pack das hier mal in deinen head-Bereich:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Die Frage aus deinem Edit im letzten Post verstehe ich nicht.

 

[hannover96xd]

Die Frage aus deinem Edit im letzten Post verstehe ich nicht.

Ok, war auch bisschen komisch erklärt ;)

Also, wenn ich meine webiste (link siehe oben) aufrufe (online) und dann ein mobil. vor die url setzte also: http://mobil.multicultipage.bplaced.net/ Dann wird die mobile Seite aufgerufen.

Aber wie kann ich die Mobile-Seite aufrufen, ohne die aktualisierte Version mit Filezilla hochladen zu müssen?
Der Pfad im Browser (offline Ansicht) lautet z.b.

file:///E:/Websites/Website%20online%20stellen/index.html

wo muss ich nun, wie bei der online version das mobile. hinsetzen???

Hier ist auch nochmal ein Beispiel:

http://mobil.hannover96.de/CDA/index.php?id=8094

Und noch eins:
https://m.deutschepost.de/


EDIT:

Und was bringt das nun?:

1. <meta name="viewport" content="width=device-width, initial-scale=1" />

 

[Nocturnex]

Das bringt, dass die Website immer so breit ist, wie die Bildschirmbreite. Da hat Trüffelkrieger meinen fehlenden Code nachgereicht (den ich vergessen hatte )

 

[hannover96xd]

Das bringt, dass die Website immer so breit ist, wie die Bildschirmbreite. Da hat Trüffelkrieger meinen fehlenden Code nachgereicht (den ich vergessen hatte )

Danke, es funkt nun auch via handy :)

 

[Tronjer]

Der Pfad im Browser (offline Ansicht) lautet z.b.
file:///E:/Websites/Website%20online%20stellen/index.html

So sollte er nicht lauten. Installiere dir erstmal einen Webserver. Falls du unter Windows arbeitest, wäre das XAMPP. Anschließend lädst du die Seiten über localhost.

Und was bringt das nun?:
<meta name="viewport" content="width=device-width, initial-scale=1" />

Die Seite wird dem Viewport des jeweiligen Ausgabegerätes angepasst und dabei nicht verkleinert.

wo muss ich nun, wie bei der online version das mobile. hinsetzen???

Gar nicht. Mobile Seiten werden heutzutage nur noch dann erstellt, wenn die eigentliche Webseite sich nicht im responsiven Design refakturieren lässt. Das trifft aber bei dir nicht zu.

Nebenbei bemerkt solltest du Bootstrap konsequent einsetzen, da du es ja ohnehin schon eingebunden hast und für die Navigaton verwendest. Was bedeutet, dass die Struktur deiner beiden Content-Boxen etwa so aussehen sollte:

<div class="container">
  <div class="row">
    <div class="col-md-7 left-box"></div>
    <div class="col-md-5 right-box"></div>
  </div>
</div>

Letzter Tipp: Nimm für das Styling lieber Klassen als IDs. Das hat etwas mit CSS Specifities und Gewichtung von Selektoren zu tun.

 

[hannover96xd]

So sollte er nicht lauten. Installiere dir erstmal einen Webserver. Falls du unter Windows arbeitest, wäre das XAMPP..

Ich habe bereits XAMPP, aber ich habe das bisher nur wegen PHP, warum sollte man es auch noch für eine "normale website" mit html, bzw. css benutzen? Was hat das für Vorteile?

Außerdem hat Webmatrix 3, den "Editor" den ich nutzte auch so eine Funktion...

Nebenbei bemerkt solltest du Bootstrap konsequent einsetzen, da du es ja ohnehin schon eingebunden hast und für die Navigaton verwendest. Was bedeutet, dass die Struktur deiner beiden Content-Boxen etwa so aussehen sollte:

<div class="container">
  <div class="row">
    <div class="col-md-7 left-box"></div>
    <div class="col-md-5 right-box"></div>
  </div>
</div>

Was meinst du genau mit Konsequent? kannst du das nochmal bitte erläutern???...;)

 

[Tronjer]

Ich meine, dass du das Grid Layout nutzen sollst.