Responsive Theme Design: how have slideshow on desktops/tablets and static photo on mobile using same template?

by

Do not use server side browser sniffing. It will fail:

The question here is how can you reliably detect mobile browsers in order to redirect them? The fact is: you can’t. Most people attempt to do this with browser sniffing—checking the User Agent string that the browser sends to the server with every request. However, these are easily spoofed in browsers, so they can’t be relied upon, and they don’t tell the truth, anyways. “Browser sniffing” has a justifiably bad reputation, so is often renamed “device detection” these days, but it’s the same flawed concept.

The $is_iphone variable @kaiser recommends is flawed (sorry, kaiser, hope you don’t mind :)).

Let the browser decide instead, use the really available space.
First add a meta element to your document head to make sure the visible width matches the device width:

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

Then set a target for your slider content:

<div id="dynamicimgaes">
    <img id="slideshow" src="https://wordpress.stackexchange.com/questions/50219/path/to/default/image" alt="" />
</div>

In JavaScript you can use the device width now to decide if you show the slider.

Here is a jQuery example (untested, feel free to edit until it works):

<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>

Leave a Comment