Responsive Theme Design: Wie haben Diashows auf Desktops / Tablets und statische Fotos auf Mobilgeräten mit derselben Vorlage?

7

Ich erstelle meine erste reaktionsschnelle WP-Site mit meinem eigenen benutzerdefinierten WP-Theme. Die primären Vorlagen sind teils flüssig, teils fest. Dadurch konnte ich nur 3 "Versionen" erstellen, eine Desktop-, Tablet- und eine mobile Version. Alle Änderungen erfolgen aufgrund von Medienabfragen. (Die Größen sind 768 bis 1200 px für den Desktop, 530 bis 767 für das Tablet und 300 bis 529 für das Handy.)

Die Homepage (die eine eigene Vorlage hat) zeigt eine Diashow. Die Diashow soll reaktionsschnell sein (ich habe sie noch nicht eingerichtet) und ich gehe davon aus, dass sie über die Tablet-Größen hinweg funktioniert. Aber wenn ich die Handygröße erreicht habe, möchte ich nur ein statisches Foto haben.

Ich möchte nicht nur "display: none" für die Diashow verwenden, da dies immer noch Platz / Strom für die Handys verbraucht. Ich möchte alle Versionen auf den gleichen Vorlagen behalten, daher denke ich, dass ich PHP oder Javascript benötigen werde, um dies zu erreichen. (Es sei denn, es gibt einen anderen Weg, über den ich mich freuen würde!)

Kann jemand mit dem Code helfen? Ich habe eine Diashow div im CSS:

#slideshow { 
height: 296px; 
margin: 20px 20px 10px 20px; 
padding: 0;
background-color: #f00;
}/*by not setting a width the sshow box fills the space minus the margins*/

und in der Vorlage wird der Diashow-Shortcode oder der Vorlagencode zwischen den Div-Tags zum Öffnen und Schließen der Diashow verschoben. Ich möchte dort aber auch ein Foto für die mobile Version platzieren. Ich denke also, ich würde eine Art "Wenn 529px oder mehr, Diashow bekommen; wenn weniger, Foto bekommen" brauchen, oder? Ich bin kein PHP- oder Javascript-Programmierer, aber ich kann hervorragend ausschneiden und einfügen!

Die Website kann unter http://66.147.244.110/~rdbikeco/ eingesehen werden. Wir sind gerade dabei, Seiteninhalte hinzuzufügen, und der Blog benötigt Aufmerksamkeit und die Seitenleisten müssen bearbeitet werden usw. Aber die Shell-Seiten sind aktiv und der Inhalt wird immer umfangreicher geladen, während ich schreibe.

Hilfe sehr geschätzt!

responsive PVA
quelle

Antworten:

14

Verwenden Sie kein serverseitiges Browser-Sniffing. Es wird scheitern:

Die Frage hier ist, wie Sie mobile Browser zuverlässig erkennen können, um sie umzuleiten. Tatsache ist: Sie können nicht. Die meisten Benutzer versuchen dies mit Browser-Sniffing. Dabei wird die User Agent-Zeichenfolge überprüft, die der Browser bei jeder Anforderung an den Server sendet. Diese können jedoch in Browsern leicht gefälscht werden, sodass man sich nicht auf sie verlassen kann und sie sowieso nicht die Wahrheit sagen. "Browser-Sniffing" hat einen zu Recht schlechten Ruf und wird heutzutage häufig in "Geräteerkennung" umbenannt, aber es ist das gleiche fehlerhafte Konzept.

Die von $is_iphone@kaiser empfohlene Variable ist fehlerhaft (sorry, kaiser, hoffe es macht dir nichts aus :)).

Lassen Sie den Browser stattdessen entscheiden, den wirklich verfügbaren Speicherplatz zu nutzen.
Fügen Sie metazunächst Ihrem Dokumentkopf ein Element hinzu, um sicherzustellen, dass die sichtbare Breite mit der Gerätebreite übereinstimmt:

<head>
    <!-- other stuff -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,target-densitydpi=device-dpi">
</head>

Legen Sie dann ein Ziel für Ihren Slider-Inhalt fest:

<div id="dynamicimgaes">
    <img id="slideshow" src="path/to/default/image" alt="" />
</div>

In JavaScript können Sie jetzt anhand der Gerätebreite entscheiden, ob Sie den Schieberegler anzeigen.

Hier ist ein jQuery-Beispiel (ungetestet, zögern Sie nicht zu bearbeiten, bis es funktioniert):

<script type='text/javascript'>
if ( 480 < jQuery( window ).width() )
{
    jQuery(document).ready( function()
    {
        jQuery.get(
            'http://path/to/slider/content',
            function( data )
            {
                jQuery( "#slideshow" ).replaceWith( data );
            }
        );
    });
}
</script>
Fuxia
quelle
Vielen Dank für Ihre Antwort. Ich werde Ihr Skript ausprobieren. Ich bin möglicherweise zurück. Danke Kaiser auch!
PVA
Nein, es macht mir nichts aus - sogar positiv bewertet :)
Kaiser
1

Diese Antwort ist nur aus historischen Gründen hier (und weil sie in der Antwort von @toschos erwähnt wird). Verlassen Sie sich nicht auf das, was Sie unten lesen können. Und nicht benutzen wp_is_mobile().

Wechseln Sie mit einem globalen Kern:

if ( $is_iphone ) 
    // do stuff for mobile
else
    // do stuff for non-mobile.

Im Grunde ist das eine vereinfachte Version des User Agent Sniffing.

Kaiser
quelle