4

I have seen very many questions asking how to detect if a device is mobile or not. Generally, they fall into 3 categories:

  1. Check the screen size/viewport
  2. Check the User Agent
  3. Use a library, such as Modernizr to work around browser capabilities.

After implementing what I could, I still run across a situation which I have never seen asked or addressed; On many mobile browsers, there is a "Request desktop site" (Chrome) "Desktop Mode" (Dolphin) or "Desktop View" (HTC Sense).

enter image description here

I have chosen strategy #1 above, which works unless the page is viewed in desktop mode. Implementing #2 has drawbacks (spoofing, uncatalogued agents, etc.).

Is there a reliable (cross browser) way to detect Desktop Mode on a mobile browser with Javascript? jQuery or other libraries would be okay, but it should be based upon feature detection, rather than an array of User Agents.

Shurvir Mori
  • 2,288
  • 1
  • 17
  • 29
Sablefoste
  • 4,032
  • 3
  • 37
  • 58
  • Most of the websites which give a desktop mode option have different urls for mobile and desktop. Your question requires more modularity i think. We can store user's desktop mode preference in a cookie and loads stylesheets based user's preference. – muratgozel Feb 11 '16 at 20:25
  • @muratgozel, thank you for the reply. Please note, I am not indicating a link within the website; rather, the mobile device can switch between "modes". This option is part of the browser app, not the web page. – Sablefoste Feb 11 '16 at 20:31
  • @Sablefoste , please check answer I had added, and mark as accepted answer if it helps you :) – Shurvir Mori Sep 28 '22 at 15:15

3 Answers3

1

Based on @Shurvir Mori's answer, I narrowed down the code actually required for this approach without any third party code:

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

returns false, if

  • Mobile device has desktop mode=off
  • Mobile device has desktop mode=off and browser in popup view
  • Desktop device has fullscreen browser window
  • Desktop device has reduced size browser window
Jonathan
  • 1,955
  • 5
  • 30
  • 50
0

So, Finally I have proven method to detect this. There's little tricky but got Exact Solution.

STEP 1

Install device-uuid Library , ( Here already mentioned. How to install )

<script src="https://raw.githubusercontent.com/biggora/device-uuid/master/lib/device-uuid.min.js"></script>
<script>
    var user_configuration = new DeviceUUID().get();
    console.log(user_configuration);
</script>
// output
// {"isAuthoritative":true,"isMobile":true,......"resolution":[980,1104],"browser":"Chrome"}

STEP 2

Detect device width

var curr_width = parseInt((window.innerWidth).toFixed());

STEP 3

Now need to compare curr_width with user_configuration.resolution[0] (width)

If both are same then this is normal view and if not then it's "DESKTOP VIEW" . attaching screenshot.

if(curr_width == user_configuration.resolution[0]){
   alert("normal_view");
}else{
   alert("desktop_view");
}

Screenshot of Desktop Mode ON in mobile browser enter image description here

Screenshot of Normal mobile view enter image description here

Shurvir Mori
  • 2,288
  • 1
  • 17
  • 29
  • Interesting... the library is a little heavy (~23K, minified) just for checking if you are on a mobile device. I will do a little research and see if it offers significant other benefits. – Sablefoste Oct 25 '22 at 02:43
  • yes, It may be heavy for you, but as a solution, I applied so many stuffs from google, but only this one get me to exact solution. so it's ok for me, if it's 23Kb . :) – Shurvir Mori Oct 27 '22 at 12:37
  • I reviewed the lib (which actually has nothing to do with this issue). The actual part needed can be narrowed down to two global variables: `screen.availWidth` & `screen.availHeight`. No need for any kind of third party code. – Jonathan Apr 14 '23 at 06:26
-1

There is no way for a webpage to detect whether the device is actually a desktop computer or not. When "Request desktop site" is enabled, the phone acts just like a desktop does. One way to check this is to check the OS of the device. However, some phones use windows as their OS, so this won't work on windows phones.

Wais Kamal
  • 5,858
  • 2
  • 17
  • 36