Verschiedene CSS dateien fuer Mobile, iPhone und Desktop

[Jan.Goergen]

Hallo zusammen,

Ich habe nun alles irgendwie durchgesucht und weiss nicht mehr wirklich wo nach ich suchen muss..

Ich bin dabei eine website zu erstellen und moechte eine index haben, die mittels php herausfindet, welcher browser benutzt wird oder besser gesagt ob der user ein Handy, iPhone oder desktop hat.

dementsprechend moechte ich dann eine CSS geladen haben.
heisst also
eine CSS fuers mobile
eine CSS fuers iPhone
eine CSS fuer den desktop.

Kann mir irgendjemand das script geben?
ich kann mir nicht vorstellen, das es so schwierig ist...
aber ich habe nichts online gefunden....

ich haben schon eins welches dann den user redirected aber die neue website wird wesentlich umfangreicher und soll komplett auf CSS basieren.

Ich hoffe jemand kann mir helfen...

Danke im Voraus!

J

[wildmieze]

hmm .. wie sieht denn das redirecten in deinem script aus? .. wenn das gut funktioniert, kann man es vielleicht anpassen ..

[Jan.Goergen]

das ist mein Script aber wie gesagt,
es ist nur ein redirect und auch nur fuer iPhone/desktop.....

<?php
$useragent = $_SERVER['HTTP_USER_AGENT'];
if (preg_match("/iPhone/i",$useragent)) {
header( 'Location: iphone/' ) ;
} else {
header( 'Location: desktop/' ) ;
}
?>

[the0bone]

Also grundsätzlich kannst du für verschiedene Medientypen andere Styles definieren.
http://de.selfhtml.org/css/formate/e...htm#link_media

Aber ich habe gestern im Netz noch was anderes gefunden. Selbst noch nicht probiert. Wäre also über feedback dankbar!
http://squaregirl.com/blog/2009/6/1/iphone-css.html

[wildmieze]

hmmm .. das script müsste sich auch auf "sonstige handys" erweitern lassen, wenn man die entsprechenden user-agents raussucht .. hier gibts ein beispiel: http://aktuell.de.selfhtml.org/artik...le-endgeraete/

und in die zeilen, wo jetzt "header .. " steht, kann man dann auch was anderes schreiben .. zB den link zu nem anderen stylesheet ..

aber der von Obone gefundene blogeintrag ist auch nett und bestimmt nen versuch wert ..

[Jan.Goergen]

ok ich habe mal wieder etwas herum gesucht und nun ein eine idee..

weiss aber nicht ob es klappt...
koennte das jemand eventuell checken..
es ist ein mix..
iphone:

Older browsers ignore the only keyword and won’t read your iPhone style sheet. To specify a style sheet for devices other than iPhone, use an expression similar to the following:

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

alles andere (desktop)

<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet" />

und dann mobile:

The user-agent knows what type of media it can display, and will download and use the style sheet for that appropriate media type. For example, computer screens use "screen", print uses "print", and wireless handheld devices use "handheld".

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

also alles zusammen (und zum einfachen einfuegen in eine website

<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" />

ich hoffe das das passt..
was meint ihr???

ich kann es leider nicht testen.....
ich schreibe gerade von meinem iPhone.....

cheers

[Jan.Goergen]

Ich habe es gerade ausprobiert und ich bekomme das richtige style sheet für mein iPhone aber die Desktop CSS klappt nicht! Hat jemand eine Idee dafür?
Und könnte jemand die handheld Version testen?

Geh einfach auf http://gummymedia.com/test

wenn ich mich richtig erinner muss man eine IE Hack oder so einfuegen.
Wie gesagt für jeden input bin ich dankbar,
cheers
j

[the0bone]

iphone zeigt grau
IE8 zeigt grau
FF3.5 zeigt rot

[Jan.Goergen]

Also ich habe es hinbekommen das IE auch nen roten Hintergrund anzeigt.
D.h. Er erkennt die richtige CSS.
Aber ich habe gestern die Seite mit nem mobile geöffnet und: nichts!
Hat jemand ne Idee?
URL ist http://gummymedia.com/test
ich habe das handheld Atribut benutzt..

Cheers guys

[Jan.Goergen]

ok ich habe noch mal etwas weitergesucht und habe diese 2 weiteren versionen gefunden...

http://gummymedia.co.uk/test/index2.html
http://gummymedia.co.uk/test/index3.html

es klappt mit iPhone, IE und safari
Kann es jemand mit nem Mobile mal testen??

der hintergrund sollte #000000 sein und die font #FF0066
danke fuer eure hilfe

cheers
j