In javascript 'If mobile phone'

Question

I was thinking of doing something with the jQuery.browser but this only returns which browser you're in and if its a webkit etc etc.

So i basically want to turn off certain js files from even loading if you're on a mobile device?

I assume you can do it but how?

Not a JavaScript solution, but I've used this for quite awhile: http://detectmobilebrowsers.mobi/ — Brad, Jan 28 '12 at 20:18
i agree. i have this in place already. Detecting on the what the browser tells me he is. I'd like double check ;) — Jamie Hutber, Jan 28 '12 at 20:28

score 43 · Accepted Answer · edited May 23 '17 at 11:54

43

I think this answer is better because it doesn't depends on screen width:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    // some code..
}

I know that now you've got a brand browser dependency, but this is a bit more maintainable that checking for the screen size.

edited May 23 '17 at 11:54

Community

1
1

answered Jun 13 '13 at 14:22

Nahuel Barrios

1,870
19
22

Updated and added as the correct answer. I also this this is a better solution for now. I'd still like something other than user sniffing though. – Jamie Hutber Jan 31 '14 at 11:33
If your going to go this route, you can do it server side, the user agent is available unlike screen width (unless you make it available). – Jasper Feb 01 '14 at 17:05
2

heh, down voting the question jasper? ekk bit childish because i change you as the correct answer :D The problem I have with widths is now days devices are reporting widths at very different rates. Even when it should be one thing it gives it out at a different width – Jamie Hutber Feb 02 '14 at 16:52

score 20 · Answer 2 · answered Jan 28 '12 at 20:21

20

You could use screen dimensions, that way you load your small UI for small screens:

if ($(window).width() < 480 || $(window).height() < 480) {
    //small screen, load other JS files
    $.getScript('/js/script.js', function () {
        //the script has been added to the DOM, you can now use it's code
    });
}

Docs for $.getScript(): http://api.jquery.com/jquery.getscript

answered Jan 28 '12 at 20:21

Jasper

75,717
14
151
146

1

Screen resolution is not appropriate to detect mobile device capability. Plenty of devices with high/low screen resolutions have varying capabilities, both on mobile and on the desk. In addition, I don't think he is asking about UI, but some other script. – Brad Jan 28 '12 at 20:23
Defiantly interesting. Currently using media quires, which have their problems. Like brad said there are limitations with mobile browsers, they lie and give silly dimensions. I would do on screen resize just check. I wonder how greedy it'll be though. – Jamie Hutber Jan 28 '12 at 20:25
Screen dimensions given for mobile devices can be wacky but you can get in the ballpark with them. – Jasper Jan 28 '12 at 20:28
@Brad What modern desktop devices have screen resolutions less than 480px? – Jasper Jan 28 '12 at 20:29
Ye i would like the double checking of browser user agent and screen resolution. I'll have to watch this closely though. – Jamie Hutber Jan 28 '12 at 20:29
@Jasper, who says all of your users use modern desktop devices, maximize their browser windows, or don't zoom in? Plus, some mobile devices have relatively high screen resolutions. I can tell you already that your test fails on my HTC EVO. What about all of the tablets with desktop-sized screen resolution, but still don't have the CPU to really handle his "complex animations"? – Brad Jan 28 '12 at 20:30
480 is probably not the best choice, perhaps something like 700 to catch devices that have a dimension of 480px. Although I do get that this is not feature detection, this is only checking the space you have to draw your UI. – Jasper Jan 28 '12 at 20:33

score 5 · Answer 3 · answered Aug 30 '14 at 21:53

I know this is a very late answer and you have probable solved your problem. But anyways, here is what I use for all of my projects:

window.isMobile = /iphone|ipod|ipad|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase());

score 1 · Answer 4 · answered Oct 16 '17 at 20:17

1

$(window).resize(function(){  /*Bind an event handler to the "resize"*/
  if ($(window).width() < 480 || $(window).height() < 480) {
      //what you have to do here
    }
})

answered Oct 16 '17 at 20:17

Abdoulaye SOW

91
2
2

@Ibo he is not far off. if you read the question, all the other solutions provide `isMobile` not `isPhone`.. i guess the correct solution is to check for mobile `then` check the screen size. – tnt-rox Aug 15 '19 at 09:53

score 0 · Answer 5 · edited May 23 '17 at 10:31

0

The problem with mobile devices vs. traditional browsers is that... well, what's the difference?

There are desktops out there with slower connections than your cell phone. There are cell phones with higher resolutions with desktops. And then, of course, the reverse is also true.

Ideally, you should consider making your site in such a way that it works well on both. While in practice, this is often difficult, I think these days that you'll find your efforts worth it. Your users will love you for it too.

If you still feel the need to attempt this... especially in JavaScript... see this post: Mobile detection

edited May 23 '17 at 10:31

Community

1
1

answered Jan 28 '12 at 20:21

Brad

159,648
54
349
530

Ye, i think this is why i'm looking into it. I don't need to load up big comments systems and my fancy animations etc for mobile. i'd rather not have them using up my http requests if possible. – Jamie Hutber Jan 28 '12 at 20:26

In javascript 'If mobile phone'

5 Answers5

Linked