title: Trigger different jQuery events depending on screen size - device width issues
body: <p>I want to display a different div, depending on if users are on my mobile site vs. my desktop/tablet site.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <pre><code>$(document).ready(function(){
  $('#submenu').hide();
  $('#mobileWebGallery').hide();
  $('#webAbout').hide();
  $('#webContact').hide();
  
  var screen = $( window ).width();
  
  if (screen &gt; 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');
      });
  }
  });
  </code></pre>