Detect Only Mobile Users with "Desktop Mode" Browsers

Question

I know that there are many ways to detect mobiles users (mainly by checking the user agent).

But many mobile browsers have the so called "desktop mode", which provides a bit more functional environment for websites.

Is there a way to provide a specific feature (e.g. a jQuery slider) only to these mobile users, browsing in this mode? The real issue I am having is that, essentially, their user agent is the same in both modes (e.g. "Opera Mini 9.0.1"), so from a webmaster's standpoint - how do I know that they are on a mobile device but are browsing the site in desktop mode?

Mcreynolds

The whole point of a "desktop mode" is to prevent mobile specific content. You shouldn't even be trying to change this – Deerstalker

I realize that, but imaging this scenario: your site detects (by checking the User Agent) if the user is visiting through one of a list of recognized mobile devices. Since you know a specific feature on your site doesn't work on mobile browsers (since it has a hover effect or something similar), so you hide this feature alltogether. However, the feature works on mobile devices, using "desktop mode". Do we keep it hidden on such devices or try to detect this mode and show the feature? That's the dilemma I am having. – Mcreynolds

Or one particular mobile browser is full of bugs that you have to work around. The bugs are present whether it's pretending to be the desktop version (which doesn't have the bugs) or not. +1 for the question. – Naker

Target features, not specific browsers. Use responsive design. Do this regardless of whether you think it's a desktop (mouse) or mobile (touchscreen) browser, and you'll have much better luck covering all possible cases. – Ligula

I have some small-viewport functionality (based on viewport height) that I don't want triggered if the user has explicitly requested desktop mode. But in landscape on most phones it is still triggered by the browsers' own menus taking up space. I know the UX is better this way, but if the user really insists on desktop mode, I want to respect that. How can I? – Chitchat

@self I have empirically determined that around 370-380px is the threshold required - much lower than I expected. Neither Chrome nor Firefox hide their own menus on scrolling in landscape orientation, thus the viewport height in 'desktop mode' is no more than around 400-440px on my phone which has logical screen size 640x360. (In 'mobile mode' the viewport is around 320px high in both browsers.) – Chitchat

@Deerstalker those settings are annoying if you develop an app. We have a soft keyboard, that is not shown on desktop devices. I now had users complain that the keyboard is not showing on their new tablet. Samsung Browser has desktop mode enabled by default, which is annoying for our app. So I want to show a "Hey you are in desktop mode" message. So detection is quite important :-) – Oahu

Answer 1

On Android Chrome, "Desktop Mode" removes the "Android" string from the user agent. If you can use JavaScript, the following mostly detects Android Chrome Desktop Mode:

var webkitVer = parseInt(/WebKit\/([0-9]+)|$/.exec(navigator.appVersion)[1], 10); // also matches AppleWebKit
var isGoogle = webkitVer && navigator.vendor.indexOf('Google') === 0;  // Also true for Opera Mobile and maybe others
var isAndroid = isGoogle && userAgent.indexOf('Android') > 0;  // Careful - Firefox and Windows Mobile also have Android in user agent
var androidDesktopMode = !isAndroid && isGoogle && (navigator.platform.indexOf('Linux a') === 0) && 'ontouchstart' in document.documentElement;

It makes the assumption that Chrome with an ARM processor is Android. The assumption definitely fails for users running Linux on ARM, fails for Android on i686 or MIPS etc (and I haven't been able to test ChromeOS).

For Windows Mobile, you can detect desktop mode by checking for the string "WPDesktop;" in the user agent.

Edit: The code used to use window.chrome and window.chrome.webstore which was a reliable test, but somewhere around Chrome 65 you couldn't use those properties anymore to detect desktop mode. Thanks to @faks for the info.

Edit 2: I now highly recommend against treating "desktop mode" as "mobile mode" but, here are my updated opinions:

• beware that code detecting desktop mode is really fragile and newer browser versions regularly break sniffing code techniques

• unless you have a serious bug or critical usability issue, it totally isn't worth sniffing

• never sniff if you are not actively maintaining the code and testing against beta versions of browsers

• I use the following for iOS: navigator.vendor.indexOf('Apple') === 0 && 'ontouchstart' in document.body. We need this to set the astonishingly shitty iOS inputMode correctly for iPadOS 13 (old navigator.platform technique now broken in iOS 13 Beta) and avoid other iOS usability bugs with other input types. I think you can check window.screen.width == 768 to sniff iPad (stays same even if orientation change). The sniff will break if Macbook comes out in a touch version.

• I now use the following for detecting Android desktop mode: 'ontouchstart' in document.body && navigator.platform.indexOf('Linux a') === 0 && (window.chrome || (window.Intl && Intl.v8BreakIterator)). Horrible unreliable sniff, but we really need it because android viewport and pinch zooming (not page zooming) is really broken on Android for our SPA (screen size is not enough as a desktop touch user can use a small window).

Thekla

I think there is a typo in your code. To detect isAndroid userAgent.indexOf('Android') should be navigator.userAgent.indexOf('Android')>-1 otherwise it returns an error. Also the !(window.chrome || window.chrome.webstore) returns false where it should returns true so the detection could works. Could you explain a bit more why you are trying to check about window.chrome property? – Huygens

@Huygens - you are right so I have fixed it. Wierdly it is correct in my original code so I must have stuffed up while rewriting code for my answer! – Thekla

Answer 2

Here's the relevant code for iOS Safari users. Essentially the User Agent loses the reference to iPhone/iPod/iPad in desktop mode, but that info is still present in navigator.platform:

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

Aggressor

The iPhone/iPod/IPad info is also not present in navigator.platform any more. I changed it to (!iOSAgent || !iOSPlatform) && (isMobile() || isTablet()) with the help of ngx-device-detector – Oahu

Answer 3

If detecting OS/Platform is not the concern, then you can go for this.

const screenWidth = window.screen.width;
const isMobile = screenWidth <= 480;
const isTablet = screenWidth <= 1024;

There can be a few high-end tablets with width up to 1280px;

Ruthi

Answer 4

Code which may be well to test:

let screenWidth = window.screen.width;
let isMobile = screenWidth <= 480;

let details = navigator.userAgent;

let regexp = /android|iphone|kindle|ipad/i;

let isMobileDevice = regexp.test(details);

if (isMobileDevice && isMobile) {
    document.write("You are using a Mobile Device");
} else if (isMobile) {
    document.write("You are using Desktop on Mobile"); // the most interesting
} else {
    document.write("You are using Desktop");
}

Casar

Answer 5

This can be done by comparing the used window-width to the actual screen-width:

function isDesktopMode() {
    return window.innerWidth > screen.availWidth;
}

returns true, if

• Mobile device has desktop mode=on
• Desktop device has browser window spanned over multiple screens
  (neglectable, in my opinion)
• Mobile device has auto screen rotation=on and desktop mode=on

returns false, if

• Mobile device has desktop mode=off
• Mobile device has desktop mode=off and browser in popup view
• Mobile device has auto screen rotation enabled and desktop mode=off
• Desktop device has fullscreen browser window
• Desktop device has reduced size browser window

Atworth

This does not work for me. – Oahu

what exactly does not work? which assumption of the many is wrong, you think? – Atworth

I just had the experience, that setting the desktop mode did not change the result of your calculation. At least in Chrome, window.innerWidth and screen.availWidth returned the same with or without destop mode. – Oahu

Interesting. Maybe in each cases the resolution is the same? Can you verify this? – Atworth