Trigger different jQuery events depending on screen size - device width issues

Question

I want to display a different div, depending on if users are on my mobile site vs. my desktop/tablet site.

I use media queries to trigger the CSS events to resize, change colors, etc, but when users are on a mobile site I want to trigger a completely different set of events jQuery events vs. when they're on my desktop/tablet site.

This does not have to do with a resize event (though I will need to work through that later) but rather the initial width of a device. It seems that when I use the code below the viewport of an iPad and an iPhone (6, if that matters) are both 980, which means that I cannot differentiate between the iPhone and iPad properly to trigger the different events.

In short, the window.width() variable below returns 980 on both my iPhone (in landscape or portrait orientation) and my iPad (in landscape or portrait orientation). Any thoughts on why, and how I could optimize below to change to the actual width of the device viewport size?

$(document).ready(function(){
$('#submenu').hide();
$('#mobileWebGallery').hide();
$('#webAbout').hide();
$('#webContact').hide();

var screen = $( window ).width();

if (screen > 667) {
    $('#mainmenu li:first').click(function(){
        $('#submenu').toggle('slow');
    });
}
else {
    $('#mainmenu li:first').click(function(){
        $('#mobileWebGallery').slideToggle('slow');
    });
    $('#aboutClick').click(function(){
        $('#webAbout').slideToggle('slow');
    });
    $('#contactClick').click(function(){
        $('#webContact').slideToggle('slow');
    });
}
});

@TJ Probably poor phrasing...I guess I mean I use media queries to add, change, remove certain styles depending on the device I'm using. My mobile site looks completely different from my desktop site (as per my media queries) but for some reason my jQuery can't pick up on the same device width restrictions that my CSS media queries can. — DanielNordby, Nov 09 '14 at 18:45
Unless you want to change the actual position of elements in `DOM`, I believe you can solve the issue using media queries itself... Can you create a [minimal example](http://stackoverflow.com/help/mcve) of what you're trying to achieve, in the inbuilt code snippet or a [jsfiddle](http://jsfiddle.net)..? — T J, Nov 09 '14 at 18:56
Here is a trimmed-down version...hopefully it makes it a bit more clear what I'm trying to do (although I haven't been able to get the jsfiddle to work properly either): http://jsfiddle.net/SkeletorDan/kgrmzpuw/4 — DanielNordby, Nov 09 '14 at 19:19

score 0 · Answer 1 · answered Nov 09 '14 at 18:30

0

Add this line in the Head tag then get the test your webpage again. jQuery will gives you different width!

<meta name="viewport" content="width=device-width, initial-scale=1">

answered Nov 09 '14 at 18:30

Mohi

1,776
1
26
39

That's actually what baffles me...I've had that line in from the start...if I take it out, add it in - zero difference. Does specific placement in the Head tag matter? – DanielNordby Nov 09 '14 at 18:32
No, it doesn't matter – Mohi Nov 09 '14 at 18:47
Ouch...them my issue remains. Not sure why, even with my viewport set that it won't give me different window.width() between iPhone and iPad. 980 is too small for portrait iPad and too large for portrait iPhone...no idea where that number is coming from. – DanielNordby Nov 09 '14 at 18:50

score 0 · Accepted Answer · answered Nov 09 '14 at 22:07

0

I found a script that helped me solve this. It helps identify mobile sites and can be found here: http://detectmobilebrowsers.com/

answered Nov 09 '14 at 22:07

DanielNordby

569
2
6
20

Trigger different jQuery events depending on screen size - device width issues

2 Answers2