Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a responsive site that works well with @media queries except for 1 or 2 maps that are embedded in an iframe and use html5 overlays to display location markers.

When viewing the site in general, the @media queries work fine, but viewing the specific map pages on different devices results in varying success - iphone retina for example shows the overlay completely in the wrong place, as does ipad, whilst android seems fine.

Rather than trying to create different css @media queries for different devices, I've decided the easiest solution will be to redirect any mobile user to an alternative full size map (a html file that is contained in the root folder, but outside of WP) that is scaleable and zoomable.

However, I've tried a variety of conditional statements to achieve this and the one that works the best seems to be the global WP variable $is_iphone.

This works for iphone and android - but I am unable to determine the exact screen size / device response at which this variable returns true. Is there a list or some specifications somewhere that show the controllers? For example Galaxy tab 10.1 does not respond to this variable, and neither does the ipad.

So - my question is, what php function can I harness to best target the most popular devices? I've tried adding the various functions to detect user-agent with minimal success.

I do NOT want a mobile plugin as this is just for 1 page - so please don't suggest wptouch! Currently I'm using this statement within the page template, but as mentioned, it's not very accurate;

<?php if ($is_iphone) : ?>

<script type="text/javascript">
<!--
var answer = confirm ("Mobile device detected.\nClick OK to view a larger, zoomable    map or click Cancel to stay on this page.")
if (answer)
window.location="../map1-full.html"
else
alert ("Redirect cancelled.\nReload the page to display this option again.")

// -->
</script>
<?php endif; ?>
share|improve this question
    
Have you considered asking the question "Why are my map overlays broken on HiDPI displays?", this question is asking for a fix for a fix, which is never a good situation. –  Tom J Nowell Dec 14 '12 at 12:28
    
Agreed. However, the map was inherited and it works correctly outside WP. Unfortunately the person concerned is no longer involved and there's no budget to re-write it. Hence the display for mobile users only in a standalone manner (and it works fine like that). But it would be nice to understand more about how to target specific devices from within a WP page template. –  Sol Dec 15 '12 at 0:20
add comment

1 Answer 1

Have you tried using the wp_is_mobile conditional tag?

http://codex.wordpress.org/Function_Reference/wp_is_mobile

share|improve this answer
    
Thanks, yes I tried with that and it works, however, there is still a lack of documentation to determine specific device behaviour, except for that listed here core.trac.wordpress.org/browser/tags/3.5/wp-includes/… - I can't find any other info. –  Sol Dec 15 '12 at 0:33
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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