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)
alert ("Redirect cancelled.\nReload the page to display this option again.")

// -->
<?php endif; ?>
  • 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, 2012 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. Dec 15, 2012 at 0:20

1 Answer 1


Have you tried using the wp_is_mobile conditional tag?



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.