7

I am building my first responsive WP site with my own custom WP Theme. The primary templates are part fluid, part fixed. This enabled me to create only 3 "versions", a desktop, tablet and mobile version. All changes happen due to media queries. (Sizes are 768 to 1200 px for desktop, 530 to 767 for tablet, 300 to 529 for mobile.)

The homepage (which has it's own template) will show a slideshow. The slideshow claims to be responsive (I haven't set it up yet) and I am anticipating it working through the tablet sizes. But when I get to the mobile size I just want to have a static photo.

I don't want to just use "display:none" for the slideshow as it will still eat up space/power for the mobiles. I DO want to keep all the versions on the same templates, so I'm thinking I'm going to need some php or javascript to make this happen. (Unless there's some other way, which I'd be thrilled to hear about!)

Can anyone help with the code? I have a slideshow div in the 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*/

and in the template the slideshow shortcode or template code will go between the open and close slideshow div tags. But I would also want to place a photo there for the mobile version. So I think I would need some kind of "if 529px or more, get slideshow; if less, get photo" right? I'm not a php or javascript programmer, tho I'm great at cutting and pasting!

The site is viewable at http://66.147.244.110/~rdbikeco/ -- we are now at the stage of adding page content and the blog needs attention and the sidebars need work, etc. But shell pages are up and content is getting loaded as I write.

Help greatly appreciated!

2 Answers 2

14

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="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>
2
  • Thank You for responding - I will try your script - I may be back. Thanks Kaiser also!
    – PVA
    Apr 27, 2012 at 22:11
  • Nope, I don't mind - even upvoted :)
    – kaiser
    Jul 7, 2013 at 16:42
1

This answer is only here for historical reasons (and because it's mentioned in @toschos answer). tl;dr Don't rely on what you can read below. And don't use wp_is_mobile().

switch with a core global:

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

basically that´s a simplified version of user agent sniffing.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.