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;