Support » Allgemeine Fragen » handheld css, @media, media, mobiles css implementieren?!

  • Hallo liebe WP-Gemeinde,

    seit einiger Zeit versuceh ich für meine Seite http://www.markusminning.de ein CSS-Stylesheet für Mobilgeräte zu implementieren – bisher erfolglos 🙁

    Aus der englischsprachigen WP-Gemeinde konnte mir bisher auch keiner helfen, die ersten 20 Google-Ergebnisseiten habe ich durch…

    Weiß jemand wie ich mein mobile.css (wenn ich es so nennen kann) so integriere (und wie), dass der Style abhängig vom Gerät (Mobil bzw. Phone) erscheint?

    Link media=“screen and (min-width 480px)“ in header.php,
    @media screen and (min-width 480px) bzw. @import im style.css
    sowie das Plugin mobile-css hab ich alles schon probiert – bisher erfolglos 🙁

    Geht es überhaupt, weiß jemand von Euch weiter?

    Vielen Dank und schönen Tag noch! Markus M.

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Moderator espiat

    (@espiat)

    Hallo, ich würde bei sowas immer auf ein vorhandenes framework zurückgreifen. Z.b. http://twitter.github.io/bootstrap/index.html

    Zum Einbinden der CSS der verschiedenen Geräte werden diese Möglichkeiten benutzt:http://twitter.github.io/bootstrap/scaffolding.html#responsive

    Oder zu suchst dir ein responsive Theme und passt es deinen wünschen an?

    Thread-Ersteller Minni

    (@minni)

    Super, danke für den Tipp!

    ich werde mal gucken wie ich damit weiterkomme. Schönen Tag noch!

    Gruß Minni

    Thread-Ersteller Minni

    (@minni)

    Hallo zusammen,

    leider habe ich es immer noch nicht geschafft ein responsive design für mein eigenes Theme zu implementieren.

    Geht es denn nicht ohne irgendwelche fremden Plugins, schließlich will ich doch nur geräteabhängig (handheld+screen) ein CSS-Stylesheet erscheinen anwenden?

    Anhand http://codex.wordpress.org/Function_Reference/wp_enqueue_style hab ich folgenden code in eine functions.php in meinem child-theme (mm-child) eigegeben:

    <?php
    function theme_styles()
    {
    wp_register_style( ‚mobile-style‘, get_template_directory_uri() . ‚/mm/mobilestyle.css‘,array(),“,’handheld‘);

    wp_enqueue_style(‚mobile-style‘);
    }
    add_action(‚wp_enqueue_scripts‘,’theme_styles‘);

    #print „

    ";
    #print_r($wp_styles);
    #print "

    „;
    ?>
    mm ist der Ordner meines parent-themes, ich hab es ebenso mit dem Verweis zu meinem mm-child versucht.

    Ergebnis: Nichts. Keine Veränderung, print_r zeit nichts an, auch keine Fehlermeldung. Stimmt etwas mit der Pfadangabe nicht?

    Auch eine Adaption des twentytwelwe-theme (s.Zeile 1586) mit Anpassung an meine css-id´s am Ende der style.css….

    @media screen and (max-width: 480px) {

    #page {
    width: 480px;
    display: inline;
    float: left;
    margin-left: 1%;
    margin-right: 0;
    position: relative;
    }
    #sidebar {
    display: no;
    }
    #footer-bar {
    width: 480px;
    }
    }

    …ergibt nichts!?

    Was mache ich denn falsch, wer kann etwas dazu sagen?! Kann ich nicht auf id´s anwenden, im twentytwelve-theme sind css-Klassen angegeben?

    Gruß Minni

    Moderator espiat

    (@espiat)

    Hallo, wenn ich z.B. hier http://mattkersley.com/responsive/ deine Seite eingebe, dann verschwindet, die Sidebar, wie oben in deinem Code angegeben. Also scheint dein CSS Code doch einen Effekt zu haben.

    Lt. Firebug wird eine „http://www.markusminning.de/wp-content/themes/mm-child/mobile.css&#8220; in deinen header geladen. Scheint also repariert zu sein.

    Thread-Ersteller Minni

    (@minni)

    s.u.

    Thread-Ersteller Minni

    (@minni)

    Hallo, danke für Deine Nachricht. Ein interessanter Link…

    Leider sehe ich das bei mir nicht, dass das mobile css-Stylesheet angewendet wird. Weder beim Link, noch mit meinem Smartphone. Man scrollt nach rechts und alles ist noch da 🙁

    Nachdem ich den Beitrag (http://forum.wpde.org/mobil-mit-wordpress/111120-mobiles-css-einbinden.html) gefunden habe und ( http://codex.wordpress.org/Function_Reference/wp_enqueue_style )oben schon angesprochen habe, versuche ich es nun in meiner functions.php im mm-child-Theme:

    <?php

    function theme_styles()
    {
    wp_register_style( ‚mobile-style‘, get_template_directory_uri() . ‚/mm/mobilestyle.css‘,array(),“,’all‘);

    wp_enqueue_style(‚mobile-style‘);
    }

    function isMobile()
    {
    return preg_match(„/(android|avantgo|blackberry|mini|mobi|palm|phone|pie|tablet|webos|wos)/i“, $_SERVER[„HTTP_USER_AGENT“]);
    }

    if(isMobile())
    {
    add_action(‚wp_enqueue_scripts‘,’theme_styles‘);
    }
    ?>
    (mobilestyle.css und mobile.css sind identisch) Auch hier tut sich bei mir nichts, wie kann das sein?!

    Es muss doch irgendwie gehen, so kompliziert kann das doch nicht sein?!

    Beste Grüße

    Moderator Frank Neumann-Staude

    (@fstaude)

    Hallo,

    wenn du deinen Firefox mal recht schmal ziehst und dann mit Firebug mal deine Elemente anschaust, wirdst du feststellen das deine inneren elemente wie Header und Main noch immer 980px breit sind. Diese sind ja auch nicht in der Mediaquery verändert.

    Siehe Screenshot: http://screencast.com/t/P59FVCmMP3Fs

    Gruß
    Frank

    Thread-Ersteller Minni

    (@minni)

    Hallo Frank,

    ich denke das liegt daran dass style.css geladen wird und eben nicht mobilestyle.css. Alls div´s sind im container #page, ausgenommen #footer-bar. div #page ist ist overflow: hidden, also dürfte doch alles richtig sein?

    Sag bitte Bescheid, wenn ich irgendwo irre…

    Nun habe ich versucht die header.php im child-theme zu erweitern, dass wenigstens eine Funktion greift:

    <?php

    function theme_styles()
    {
    wp_register_style( ‚mobile-style‘, get_template_directory_uri() . ‚/mm-child/mobilestyle.css‘,array(),“,’all‘);

    wp_enqueue_style(‚mobile-style‘);
    }

    function costum_style()
    {
    wp_register_style( ‚costum-style‘, get_template_directory_uri() . ‚/mm-child/style.css‘,array(),“,’all‘);

    wp_enqueue_style(‚costum-style‘);
    }

    function mobil_styles_method()
    {
    wp_enqueue_style(‚custom-style‘, get_template_dirrectory_uri() . ‚/mm-child/style.css‘);
    $mobilestyle = „
    #page {
    width: 480px;
    display: inline;
    float: left;
    margin-left: 1%;
    margin-right: 0;
    position: relative;
    }

    #sidebar {
    display: no;
    }

    #footer-bar {
    width: 480px;
    background-color: yellow;
    }“;
    wp_add_inline_style( ‚costum-style‘, $mobilestyle_css );
    }

    add_action(‚wp_enqueue_scripts‘,’mobil_styles_method‘); #LINE 41

    function isMobile()
    {
    return preg_match(„/(android|avantgo|blackberry|mini|mobi|palm|phone|pie|tablet|webos|wos)/i“, $_SERVER[„HTTP_USER_AGENT“]);
    }
    if(isMobile())
    {
    add_action(‚wp_enqueue_scripts‘,’theme_styles‘);
    }
    ?>

    Ergebnis: Nichts, die header.php im child-theme wird wohl nicht berücksichtigt, denn wenn ich im Browser den Pfad dorthin angebe, heißt es:
    Fatal error: Call to undefined function add_action() in /www/htdocs/w00cefc0/wp-content/themes/mm-child/functions.php on line 41:

    (Zeile 41 habe ich oben kenntlich gemacht) Natürlich habe ich auch in der header.php einen Link zum mobil-stylesheet:
    <link rel=“Stylesheet“ type=“text/css“ media=“handheld, screen and (max-width: 480px)“ href=“<?php echo get_stylesheet_directory_uri(); ?>/mobile.css“ />

    Nichts von alledem scheint etwas zu bewirken?! Was ist das los?! Erkennt wp die stylesheets nicht oder stimmt die Pfadangabe nicht…?

    Links:
    http://codex.wordpress.org/Function_Reference/add_action
    http://codex.wordpress.org/Function_Reference/wp_enqueue_style
    http://codex.wordpress.org/Function_Reference/wp_add_inline_style
    http://forum.wpde.org/mobil-mit-wordpress/111120-mobiles-css-einbinden.html

    Gruß

    Thread-Ersteller Minni

    (@minni)

    Also weiß niemand was ich machen muss, damit meine Sidebar beim mobilen surfen ausgeblendet wird?!

    Bei der Ansicht in der ‚Web Developer Toolbar‘ im Firefox Browser wird alles bei – CSS, Stile nach Medientyp anzeigen, richtig dargestellt.

    Doch bei mobilen Emulatoren und meinem Smartphone wird die Sidebar angezeigt (style.css). Also wird die mobilestyle.css wohl nicht geladen.

    Es muss doch bei WordPress möglich sein ein geräteabhängiges css-style abrufen zu können?!

    Dazu weiß keiner etwas?!

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Das Thema „handheld css, @media, media, mobiles css implementieren?!“ ist für neue Antworten geschlossen.