• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mobile Version der Website im Desktop-Browser

P

PinkieBrain

Neues Mitglied
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: 
<meta name="viewport" content="width=480, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css"  media="only screen and (max-device-width: 480px)" href="css/mobile.css" />

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
 
In dem du das

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

in das

Code: 
<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.
 
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 <head> zeigen:

HTML: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow"/>
<meta name="language" content="de"/>
<meta name="viewport" content="width=480, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" type="text/css"  media="only screen and (max-device-width: 480px)" href="css/mobile.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
</head>

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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben