Stylesheet für Handys einbinden

Ich stehe momentan vor einem für mich etwas kniffligen Problem. Ich möchte für mobile Endgeräte gerne eine zweite Stylesheet-Datei einbinden.

In meinem Theme wird in der functions.php in der Funtion mytest_scripts() mein Stylesheet style.css mit wp_enqueue_style() geladen.

Zum Test habe ich da folgendes nun stehen

if (wp_is_mobile()) {
    echo "<link rel='stylesheet' id='mytest-style-css'  href='" . get_template_directory_uri() . "/style.mobile.css?ver=4.2.2' type='text/css' />";
  } else {
   wp_enqueue_style( 'mytest-style', get_stylesheet_uri() );
  }

Auf mobilen Endgeräten wird aber trotzdem das normale Stylesheet geladen. Wenn ich eine Funktion wie wp_is_mobile() außerhalb von Wordpress teste, dann gibt mir mein Handy auch das mobile Stylesheet.

Dieser Plan scheint ja nicht zu funktionieren. Wie kann ich meine CSS-Datei nun so anpassen, dass sie Desktop+Mobil enthält?
Mit Google habe ich folgendes gefunden

Zitat

For iPhone
Media only screen and (min-device-width: 480px){}

For tablets
Media only screen and (min-device-width: 768px){}

Kann man damit etwas anfangen?

Danke das werde ich mir nach dem Essen mal ausführlich angucken.

Ich habe schon gelesen, dass das media "handheld" wohl obsolet ist, da Apple es damals nicht für nötig hielt es auszuwerten.

-

Beim Überfliegen der Seite glaube ich schon zu sehen, dass es wohl auf
Media all and (orientation:portrait)
und
Media all and (orientation:landscape)
hinauslaufen wird.

Ich werde mich der Sache später annehmen und es testen!

Danke vorerst.

-

Mist, ich sehe gerade, dass ein PC-Monitor auch auf (orientation:landscape) anspringt. Ok, dann klappt das schon wieder nicht.

Ich habe es nun komplett anders gemacht, sodass ich gar nicht erst auf die @media-Typen angewiesen bin. Mal davon abgesehen, sind die meiner Meinung nach eh völlig unsinnig.
Unsinnig im Sinne von, dass schon handheld nicht respektiert wird.

Für alle die es interessiert.
in der functions.php in der Funktion <theme name>_scripts steht bei mir am Anfang

wp_enqueue_style( 'mytest-style', get_stylesheet_uri() );


if (wp_is_mobile()) {
    echo "<link rel='stylesheet' id='mytest-style-css'  href='" . get_template_directory_uri() . "/style-mobile.css?ver=4.2.2' type='text/css' />";
  } else {
    echo "<link rel='stylesheet' id='mytest-style-css'  href='" . get_template_directory_uri() . "/style-screen.css?ver=4.2.2' type='text/css' />";
  }

Ich habe also die Stylesheets:
- style.css - enthält alles Allgemeine, was Desktop-und Mobil-Version benötigen
- style-screen.css - enthält spezielle Anpassungen für die Desktop-Version
- style-mobile.css - enthält spezielle Anpassungen für die Mobile-Version

Klappt wunderbar.

Keine Sorge, ich weiß schon was Responsive Design ist und verstehe auch das Konzept. Bin ja nicht doof :P
Aber wieso sollte man sich die Mühe machen und 10 verschiedene Weichen einbauen, wenn es anders schneller und einfacher geht?