Detecting mobile browsers with one line of JavaScript
Normally, you would not want to try and do this. Build a responsive web app and use media queries instead. But sometimes you want different behavior from your app when used on a phone as opposed to a laptop — not just a different look depending on the width of the browser window.
A brute force approach
One way would be to grab the browser’s user agent string and and look up the associated device in a database of all known devices and their user agent strings. This is what WURFL allows you to do, for a fee. There are free and open-source alternatives, such as detectmobilebrowsers.com, they typically rely on long regular expressions.
Feature detection > user agent sniffing
The problem with user agents is that there are a lot of them, they change and multiply. Your database or regex of choice will be in need of regular verifications and updates. For my app, I was looking for a simpler, more direct and reasonably future-proof way of detecting a mobile browser.
What is “mobile” anyway?
A smartphone is mobile, a desktop computer is not. But there are all kinds of devices in between. The line between large phones and small tablets is blurred. All phones have touch screens, but so do some laptops and desktops. What then, is the distinguishing feature?
It depends on your app. It may, in fact, be the touch capability that makes the difference for your purposes, mobile or not mobile. I wanted to enhance the experience of smartphone users while typing a text message. Because phones have smaller screens and virtual keyboards take up a lot space. In such a case, screen size is key.
screen.width, screen.height
window.screen.width and window.screen.height started out as properties returning different things in different browsers, which made them borderline useless. Lately, however, the consensus for them is to refer to web-exposed screen dimensions in ‘CSS pixels’ (as opposed to physical pixels of retina screens). Internet Explorer will take into account page zoom, which is annoying, but is a non-issue if you set viewport meta tag to width=device-width, initial-scale=1, user-scalable=no, which for web apps is a good idea anyway.
Modern desktop computers and laptops have screen dimensions where both sides are at least 768 pixels. Anything with one or both sides smaller is a phone or a small tablet, which can be treated like a phone. This condition written in JavaScript becomes:
Math.min(window.screen.width, window.screen.height) < 768A safeguard
MDN recommends looking for “Mobi” anywhere in the User Agent to detect a mobile device. This will catch some tablets as well, which you need to be ready for and OK with, but otherwise it is a simple fallback for the odd browsers that will misreport screen.width and screen.height as physical pixels. In JS:
navigator.userAgent.indexOf("Mobi") > -1The result
Finally, the line of JavaScript to detect a mobile device from the browser, if screen size is what you care about:
var isMobile = Math.min(window.screen.width, window.screen.height) < 768 || navigator.userAgent.indexOf("Mobi") > -1;