Javascript solution to detect ipad, and orientation

Question

Is there a reliable way to detect that a web-page is being viewed from an iPad (no false positives) and what the orientation is via JavaScript?

I think this is good for the first part:

var isiPad = navigator.userAgent.match(/iPad/i) != null;

I think I have found the second part:

<button onclick="detectIPadOrientation();">What's my Orientation?</button>

<script type="text/javascript">
    window.onorientationchange = detectIPadOrientation;
    function detectIPadOrientation () {
        if ( orientation == 0 ) {
            alert ('Portrait Mode, Home Button bottom');
        } else if ( orientation == 90 ) {
            alert ('Landscape Mode, Home Button right');
        } else if ( orientation == -90 ) {
            alert ('Landscape Mode, Home Button left');
        } else if ( orientation == 180 ) {
            alert ('Portrait Mode, Home Button top');
        }
    }
</script>

I don't know if it reliable for all iPads, including the new smaller one for example. So my question is: Would these functions work reliably on all iPads? And would there be any false positives?

Why do you need to know that the script is being run on an iPad, why not simply assess support for the features that you want to implement? [Feature detection](http://stackoverflow.com/questions/1294586/browser-detection-versus-feature-detection) is usually a better plan than [user-agent sniffing](http://en.wikipedia.org/wiki/User_agent#User_agent_sniffing), which is [often a bad idea](http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx). — David Thomas, Dec 06 '12 at 12:19
Have a look at this http://stackoverflow.com/questions/3514784/best-way-to-detect-handheld-device-in-jquery — DDK, Dec 06 '12 at 12:24

score 0 · Answer 1 · answered Dec 06 '12 at 13:58

0

It's NEVER a good idea to rely on the user agent string because it can be spoofed. You should however, consider reading up on "responsive web design"

http://en.wikipedia.org/wiki/Responsive_web_design

I would suggest that you use jQuery. I have a feeling that the orientation will be either Landscape or Portrait. I think the OS is clever enough to know which way up to face the browser depending on which way you're holding the device.

Consider this jQuery, this is probably along the lines you want...

$(window).resize(function() {
    /*  This function should be triggered when the orientation 
        changes since orientation essentially changes the window size. */

    if($(window).width() == ipadLandScapeWidth) {
        //Do this in landscape mode.
    } else {
        //Do this in portait mode.
    }
});

answered Dec 06 '12 at 13:58

Matthew Layton

39,871
52
185
313

I want it to work on iPad only, not other devices of the same size. – Billy Moon Dec 06 '12 at 14:06
@BillyMoon, like i said, regarding the user agent, it can be spoofed, so a tech savvy user could spoof the user agent on their iPad, changing to, for example, the user agent for Internet Explorer, therefore, your solution will not work. Equally, someone might spoof their user agent string in IE so that it uses the iPad user agent, thus, your solution would work in IE. The other problem you will face is that the user agent may vary between browsers, so this might work in Safari on iPad, but not Opera on iPad. – Matthew Layton Dec 06 '12 at 14:33
@BillyMoon, check this out...this might help...but it appears they are still using the user agent. http://stackoverflow.com/questions/4617638/detect-ipad-users-using-jquery – Matthew Layton Dec 06 '12 at 14:35
3

@series0ne, I've never understood the argument. If someone is spoofing their user agent, who cares what results they get? Our responsibility is to deliver a working site to genuine users, not people spoofing their user agent. – Chris Haines Apr 28 '14 at 10:57
1

@Hainesy, Good point, I like it - and you're right, we should be delivering working sites to genuine users as opposed to people spoofing their UA but in this case the OP wants the site to work on iPad ONLY. Therefore using the UA probably isn't enough because I could spoof e.g. FireFox on my PC to have an iPad UA, in which case the site could potentially work on a non-targeted platform. Secondly, say apple released a new version of Safari with a new UA, that didn't match the OP's UA challenge - Their code would break. Whilst I agree with what you say, UA is too flaky IMO! – Matthew Layton Apr 28 '14 at 20:29

Javascript solution to detect ipad, and orientation

1 Answers1