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');
    });
}
});

Answer 1

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