Using jquery to determine screen width

Question

Having trouble getting this script to run properly on an iphone 6. Keeps coming up as "not mobile". What am I missing?

$(document).ready(function(){
    if ($(window).width < 700){
        alert("mobile");
    }
    else {
        alert("not mobile");
    }
});

EDIT: apologies, the code I typed here had a typo, but was not the cause for my issue. I had inaccurate info on iphone resolution. Thanks everyone!

ekuusela · Accepted Answer · 2015-04-26T21:03:35.227

18

The iPhone 6 display has a resolution of 1334x750. When emulating iPhone6 in chrome dev tools the width is reported as 980 (I don't know if this is accurate).

You might be interested in this: http://detectmobilebrowsers.com/

Also, as others have noted, replace $(window).width with $(window).width()

edited Apr 26 '15 at 21:03

answered Apr 26 '15 at 20:50

ekuusela

4,669
1
21
42

Whats the difference between viewport size and resolution? http://viewportsizes.com/?filter=iphone%206 – dsol828 Apr 26 '15 at 20:53
The site does not show any infos about device width/height. Go to whatismyscreenresolution.net instead. – Black Jan 24 '20 at 10:23
As this is old, I'm not sure you have figured it out the problem with mobile screens. But this solved the issue for me. Just add this in your tag. `` – Omar Omeiri Jul 16 '20 at 19:19

score 13 · Answer 2 · edited May 23 '17 at 12:24

13

Well, ignoring what ekuusela said about screen resolution, you seem to have forgotten your parentheses after width, which is a method, not a field. To fix this, just add () after it:

if ($(window).width() < 700)

See the documentation for width() for more info.

edited May 23 '17 at 12:24

Community

1
1

answered Apr 26 '15 at 20:51

Fund Monica's Lawsuit

5,770
8
46
65

score 3 · Answer 3 · edited May 23 '17 at 12:08

3

iPhone6 screen is 1334x750 pixels. If you only use the width to detect mobile user, see this instead.

edited May 23 '17 at 12:08

Community

1
1

answered Apr 26 '15 at 20:53

Sami

1,764
1
10
23

score 2 · Answer 4 · answered Apr 26 '15 at 20:51

2

JQuery uses $(window).width(). It's a function, not a property.

answered Apr 26 '15 at 20:51

ScottMichaud

312
3
7

Gosh*darnit* you were 15 seconds faster than me. – Fund Monica's Lawsuit Apr 26 '15 at 20:52
To be fair, I typed significantly less than you. :p – ScottMichaud Apr 26 '15 at 20:53

score 1 · Answer 5 · answered Aug 19 '20 at 16:23

If you are using bootstrap add an element to the screen that only displays at a certain break point (bootstrap 4):

<div id="IsMobile" class="d-block d-lg-none"></div>

Then if it's visible:

if ($("#IsMobile").is(":visible")) {
     //Do Something...
}

score 0 · Answer 6 · answered Apr 26 '15 at 20:51

0

You would want .width(), not just .width. Also, log it and make sure it's what you're expecting.

answered Apr 26 '15 at 20:51

Bill Criswell

28,428
3
69
65

score 0 · Answer 7 · answered Apr 26 '15 at 21:06

0

This thread gets deep into the options both in Javascript and JQuery

Get the size of the screen, current web page and browser window

answered Apr 26 '15 at 21:06

MaxRocket

837
9
24

Using jquery to determine screen width

7 Answers7