Mobile Version der Website im Desktop-Browser

Guten morgen liebe HTMLer,
ich habe die ganze Nacht gesucht und rumprobiert aber nichts hat geholfen.

Meine Website hat eine normale Desktop-Version und eine Mobil-Version.
Die Mobil-Version wird über:

[html]

[/html]

angesteuert.

Nun möchte ich meinen Kunden auf dem Desktop auch die Mobile-Version zeigen. iFrame, DIV etc. ist dabei völlig egal.
Die Frage ist nun wie bekomme ich sowas hin?

LG
PinkieBrain

Das Browserfenster kleiner skalieren?

Moin,
unter Chrome mit dem Ripple Emulator z.B.
https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc

MfG

In dem du das

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="css/mobile.css" />

in das

<link rel="stylesheet" type="text/css" href="css/mobile.css" />

änderst?

Danke für die schnelle Hilfestellung!

Das Fenster skalieren klingt logisch - funktioniert aber nicht. Das habe ich bereits ausprobiert.
Wenn ich das „media=„only screen an (max-device-width:480px)““ weglasse, dann wir im Desktop-Browser die Mobile-Version geladen - aber nicht mehr meine normale style.css, da die mobile später geladen wird.

Eventuell sollte ich das kurz besser erläutern:

Ich habe eine index.html die über den Desktop die style.css aufruft und über ein mobilgerät wird die mobile.css aufgerufen.
Nun möchte ich, dass die User meiner Desktop-Version die Möglichkeit erhalten die Website auch als Mobile-Version aufzurufen.

Hier ist ein Beispiel:
http://www.brickandmobile.com/mobile-marketing/salons-spas/

Im iPhone wird eine mobile Version einer Internetseite angezeigt - genau so soll das auch bei mir aussehen.

Das Browserfenster verkleinern muss doch funktionieren? Wie hast Du das denn angestellt?

Es werden btw. immer alle für das aktuelle Endgeräte gültigen CSS-Dateien geladen. Also erst deine „normale“ CSS-Datei, danach die mobile.css, wobei letztere evtl. Eigenschaften besitzt, die die „normalen“ CSS-Eigenschaften überschreiben.

Moderation: Verschoben von HTML zu CSS.

Hast du mal nen Link, bevor wir hier weiter über deinen Code spekulieren?

Es ist ein Projekt meiner Firma, in der in angestellt bin als Frontend Programmierer. Das Projekt befindet sich derzeit noch im Aufbau, deshalb kann ich euch leider nur den zeigen:

[HTML]

[/HTML]

Ich hoffe mal, dass es euch etwas weiter hilft.

Selbstverständlich überschreiben viele Eigenschaften der mobile.css die Eigenschaften der style.css, da es doch angepasst werden muss.

indem du statt „max-device-width:480px“ einfach „max-width:480px“ schreibst

GENIAL!

Vielen Dank für deine Hilfe! So einfach ist es am Ende.