16

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.)

apptaro
  • 279
  • 2
  • 8

3 Answers3

3

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);
zeroimpl
  • 2,746
  • 22
  • 19
  • 5
    It looks like this won't work anymore: platform=MacIntel for Desktop Mode (tested on iPadOS 13 Beta 2). Also iPadOS 13 looks to be setting Desktop Mode to true by default (check Safari Settings). My current workaround is to presume touch support is only on iOS/iPadOS and not Mac i.e. 'ontouchstart' in document.documentElement and Safari means Desktop Mode - however this is a verty dirty hack as it would break if Apple come out with a MacBook with touch. I'm not sure how pens are dealt with either. – robocat Jul 03 '19 at 02:11
  • Please see this answer, which works very well; it uses the same principle, but looks for different values, and relies on touch detection..:https://stackoverflow.com/questions/58019463/how-to-detect-device-name-in-safari-on-ios-13-while-it-doesnt-show-the-correct – Peter Nov 25 '19 at 02:25
3

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.

George
  • 78
  • 4
Дмитрий Ляпунов
  • 51
  • 4
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

Peter
  • 1,236
  • 10
  • 10