Loading alternate page header including menus based on screen size

Loading alternate page header including menus based on screen size

Help!  I am new to jquery. 
The first part of my page is my header and a menu.
I have one menu that I want loaded when the code is loaded via cellphone and a different one when on any other media.
This script loads my header but then the script just keeps running until the browser times out.
None of the rest of my code loads.
 
<head>
          <script src="jquery/jquery-1.8.3.min.js"></script>
</head>
 
<body>
    <div id="layout">
   
   <script >
          if (screen.size < 321) {
                 $('#layout').load('includes/navbar-cellphone.html');
           } else {
                 $('#layout').load('includes/navbar.html');
            };
   </script>   








 
.... reamining <div> 's
 
</body