How to detect “request desktop site” mode of iOS Mobile Safari and Chrome?

Question

I'd like to send iPad version of my web site when users use "request desktop site" of iOS mobile safari or "request desktop version" of iOS Chrome. It seems that only user-agent is different in that mode, and it seems impossible to detect. Any ideas?

My site has three versions : desktop / tablet / smartphone. The tablet version is a static version of desktop version which is very dynamic and uses JavaScript heavily (parallax effects.)

Answer 1

I've seen a few people using cookies/sessionStorage to detect the changing user agent, such as http://leavesofcode.net/2013/07/08/responsive-design-with-switch-to-desktop-site-option/ and https://gist.github.com/dtipson/7401026

However, I found you can skip all that, by cross-referencing navigator.platform against navigator.userAgent . This is for iOS specifically, as I hear Chrome's "request desktop site" also updates the viewport automatically so this check may not be required on it.

var iOSAgent = window.navigator.userAgent.match(/iPhone|iPod|iPad/);
var iOSPlatform = window.navigator.platform && window.navigator.platform.match(/iPhone|iPod|iPad/);
var iOSRequestDesktop = (!iOSAgent && iOSPlatform);

Answer 2

Another dirty hack is to use platform.maxTouchPoints on iOS 13+ . This field is still present even after requesting the desktop version, but on real desktop Safari this field is absent.

Answer 3

Please see the answer to this question: https://stackoverflow.com/a/58064481/1237536

it works flawlessly (for now, anyway)..

Basically, when iPads are in 'Desktop mode', they advertise themselves as MacIntel, but no Mac currently has a touchscreen, so you look for a MacIntel with touch enabled:

let isIOS = /iPad|iPhone|iPod/.test(navigator.platform) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)

but you should definitely look at the original answer -- i'm not trying to take credit: https://stackoverflow.com/a/58064481/1237536