HTML5: Detecting if you’re on mobile or pc with javascript? [duplicate]

by

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! 🙂

More Related Contents:

  1. Height equal to dynamic width (CSS fluid layout) [duplicate]
  2. Responsive horizontal page sliding
  3. Bootstrap v2 Dropdown Navigation not working on Mobile Browsers
  4. How can I detect Internet Explorer (IE) and Microsoft Edge using JavaScript?
  5. Possible to disable @media queries or force a resolution? Reason: Allow an iphone to see the desktop site?
  6. How to override css prefers-color-scheme setting
  7. How to make superfish dropdown menu responsive?
  8. Is there any way keep part of my code in a seperate document? [closed]
  9. What is wrong with this basic Javascript code? [closed]
  10. Real-Time Calculation in Javascript: Based on text field and fixed price rate of an item
  11. How can I get the data-id attribute?
  12. How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?
  13. Convert json data to a html table [closed]
  14. How to submit an HTML form without redirection
  15. Is there a DOM event that fires when an HTML select element is closed?
  16. How to get number of rows in using JavaScript?
  17. Detecting WebP support
  18. How to find the width of a div using vanilla JavaScript?
  19. How does facebook rewrite the source URL of a page in the browser address bar?
  20. Javascript regular expression to validate URL
  21. Animated gif only loops once in Chrome and Firefox
  22. append option to select menu?
  23. How can I detect when a new element has been added to the document in jquery?
  24. How can I add multiple sources to an HTML5 audio tag, programmatically?
  25. jQuery: trigger a hover event from another element
  26. Angularjs does not load scripts within ng-view
  27. How to use jQuery’s drop event to upload files dragged from the desktop?
  28. Embed google map is wrong displayed until resizing webpage
  29. Check if a browser has built-in HTML form validation?
  30. Get Clicked from

Leave a Comment