Menu
What javascript code can I use to detect if users are on a mobile or pc/mac browser in HTML5?
227
To detect if the user is using a mobile device in JavaScript, we can use the userAgent property. This property is part of the navigator object and sent by the browser in HTTP headers. It contains information about the name, version, and platform of the browser.
It works by examining information contained in the HTTP headers, particularly User Agent strings sent by all web-enabled devices. The User Agent is looked up in a database that returns any requested information including device type.
Go to the Settings or Options menu, scroll to the bottom of the list, and check 'About phone', 'About device' or similar. The device name and model number should be listed.
I was looking into this a few years back. In short, you can't do this with 100% reliability. There seem to be 2 approaches commonly used to provide a 'best-guess':
1. User Agent Detection This is where you check what the client is claiming to be. e.g.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// is mobile..
}
It's not perfect, since I believe it is fairly easy for this property to be altered accidentally or otherwise. Plus it is highly unlikely that this list will still be accurate in 2 years' / 2 weeks' / 2 days' time!
2. Using Client Capabilities As you can imagine, a more pragmatic approach - allows you to cater to the known physical capability of the client. e.g.
if( screen.width <= 480 ) {
// is mobile..
}
However this is not ideal either, since higher and higher pixel densities in modern devices give you a misleading result: appearing that you have more 'room' than you actually do. Plus different browsers may expose their capabilities through different means.
If anyone has any better ideas to robustly discern between desktop and device, please comment! :)
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
