Calling Jquery Functions based on media Queries and Viewport Size

Calling Jquery Functions based on media Queries and Viewport Size

I have a jquery function which is running perfectly on my website and it hides and shows a hidden dive which contains an inline-block list.


 
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery.noConflict(); jQuery('#mdiv').click(function(){jQuery('#subNav').slideToggle(1000)}); jQuery("#subNav").mouseleave(function () {jQuery('#subNav').slideToggle(1000)}); }); </script>
Now I am trying to create a responsive web page and responsive CSS navigation for smart phones using media queries.what I want to do is keep enabling the jquery on regular viewport screens like desktop and instead adding 4 new li to ol on responsive smartphone size. Here is my code for responsive nav 
  1. @media only screen and (min-width: 0px) and (max-width: 479px) { #nav .current{background:#666; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background:none; } #nav { margin: -20 2% 0 0; padding: 0; } #nav li { margin: 0; display: block; float: left; width: 100%; clear: none; background:none; } #nav a { width:150px; margin-top: 5px; padding: 6px 0 8px; text-indent: 10px; color: #fff; background: rgba(194,100,40,0.75) url(images/bg_arrow_white.png) 96% 50% no-repeat; border-top: 1px solid rgb(194,100,40); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #nav a:hover { border-bottom: none; } }

Can you please help me to find out how I can run two jquery functions based on viewport size?

Thanks