mobile css mit Einbinden?

Hallo Leute,

ich habe jetzt zwei CSS Datei gebaut, einmal für normale Browser (Firefox und co) und dann ein mobiles für iphone und co.

So beide CSS Datei funktionieren, insofern die Datei immer sytle.css heißt.
Nun wollte ich beide css Dateien in ein Template haben, sprich mit Browserweiche die Sache realisieren.

Nur mit den Codes die ich gefunden habe (ich glaube das waren ganze 2 Stück!!!) nimmt der immer dir normale CSS und nicht die style_mobile.css.

Ich habe das ganze mit User Agent Switcher (bei Firefox) und Entwickler (bei Safari) getestet nur das ging nie.

Habt Ihr ne Idee wie ich das realisieren kann, dass es funktioniert?

das mit handheld würde zb bei iphone nicht gehen, da es das von Screeen nimmt. das mit der Breite kann ich mal probieren.

EDIT:
so hab jetzt mal folgenden Code eingebaut:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>/style_mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" />

Wenn ich jetzt das mit Safari (Entwickler -> iphone) dann nimmt der noch immer die style.css und nicht die style_mobile.css.

was mach ich falsch?
Ich versteh das nicht.