Detecting Tablet Mode in JavaScript… Slightly Incorrectly
For the past 10+ years my perfect computer setup was a 2-in-1 PC docked to a proper desktop setup — external monitor(s), keyboard, mouse. It started with Surface Pro 3 (I even think I had some Lenovo with flippable screen before that) and continued through the years. I’ve had a “proper” Asus Zenbook laptop that you could flip 360 degrees — and that’s how I used it when docked. Now I’m using an Asus ROG Flow Z13 (think Surface Pro on steroids) as my machine.
Everything works as expected in this setup and the useless-while-docked laptop keyboard is out of the way. In the last several years there was one annoyance though. Spotify’s desktop app sees my computer as a tablet and displays touch-first controls even when it’s on my main non-touch screen.
The differences in Spotify are fairly subtle and you probably can’t tell what is “wrong” in the image above. Normally, on a desktop, the app would show track numbers where all these play buttons are, and they would only turn into “play” buttons on hover. A more annoying side is that “play” buttons don’t appear when you hover over albums and playlists in the library — you have to click on the album cover and then press play in the details. I’ve whined about this on Twitter and, I think, contacted support about this. Nothing changed in years, but these issues are fairly minor, so I would vent for a minute and go on with my life.
Recently, I started using Linear and the same issue is even more pronounced and annoying there. In “tablet” mode it loses its extensive contextual menu when you right-click on a task:
And drag-and-drop stops working.
This reminded me of my Spotify issues and, since in this case the UX degradation is more severe, I decided to investigate. My initial theory was that they both use some common open-source library for “tablet detection” and I can fix it and create a PR to spread the fix across the world. Unfortunately, it looks like things are both much simpler and way more complicated.
Detecting Tablets in JavaScript
After some googling and finding some esoteric and/or outdated solutions. I turned to our AI overlords. This is what Bing Chat had to say:
And this code behaves exactly like Spotify and Linear — it detects my PC as a tablet when its keyboard is removed even when docked. But if I reattach the keyboard, it suddenly realizes I’m not in tablet mode.
According to MDN what it does is check whether the primary input mechanism is some device with limited accuracy, such as finger on a touch screen. However, right there on the “pointer” docs page there’s a note:
Note: If you want to test the accuracy of any pointing device, use
any-pointerinstead.
Aha! This looked like just what the doctor ordered. Even though, I think even the “pointer” check should return “fine” in my setup, I was sure that “any-pointer” would definitely do that as it is supposed to check the accuracy of any available pointing device — and I clearly have a mouse.
Unfortunately, it still returns “coarse” on Chromium browsers and that’s what all these “native” apps use under the hood.
Turns out a bug report about this was filed in 2020 and another one this year. So, it doesn’t look like it’s getting resolved any time soon 🥲
Having said that, Firefox seems to be handling it correctly, so it doesn’t look like an underlying Windows bug. Also, none of the real native Windows apps I use show any signs of misinterpretation like this.
Meanwhile, does anyone know a better way to detect tablet mode in JavaScript?
P.S.: if you want to quickly check what the code detects on your machine (or copy it) click here.
