Detect mobile device via Javascript

Question

Related to this question: Detect Android phone via Javascript / jQuery

In the new version of the android sdk, the native browser isn't returning the codename "android" anymore. navigator.userAgent returns something like:

mozilla/5.0 (X11; Linux x86_64) AppleWebkit7534.24 (KHTML, like Gecko) Chrome/11.0.696.34 Safari7534.24

Any suggestions why? This comes from a handset with the HTC One S with the current Android version 4.1.1

This is because the browser you use is from mozilla or chrome and not android's default browser. — Lalith B, Jan 04 '13 at 08:18
Try feature detection instaid of browser/device detection. It is far more reliable. (check [modernizr](http://modernizr.com/)) — VDP, Jan 04 '13 at 08:27

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

See this question. Are you sure you're not viewing in desktop mode? The stock browser, and many others, have two different user agents depending on the browsing mode.

edited May 23 '17 at 11:56

Community

1
1

answered Jan 04 '13 at 08:23

Oleg Vaskevich

11,606
5
55
75

score 0 · Answer 2 · answered Jan 04 '13 at 08:28

0

Don't ever use browser sniffing! Use feature detection. There is a javascript library called modernizr, that can do actions according to features of the users client.

answered Jan 04 '13 at 08:28

Bastian Rang

1,967
18
25

Ivan Nikolchov · Answer 3 · 2013-01-04T08:41:44.087

Yeah... this is probably because your browser is in "desktop mode".

You probably want to show some mobile version of your page when displayed on small screens so what you can try is:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script type="text/javascript">  
  if ((screen.width < 480) || (screen.height < 480)) {    
    location.replace('/m/');
  }  
</script>

You need the viewport metatag for the browser to report the actual screen size.

Edit:
According to this you might need to wait some time for the browser to "catch up" before checking the screen size so I guess it will be better to use:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script type="text/javascript">  
  setTimeout(function() {
               if ((screen.width < 480) || (screen.height < 480)) {    
                 location.replace('/m/');
               }  
             }, 200);
</script>

Detect mobile device via Javascript

3 Answers3