how do I make Drupal Zen sub theme mobile friendly? I have changed over to using the Zen theme (instead of Omega) on my drupal site, I have a Superfish menu configured with default settings for SF Small Screen plugin to enable on browser width (screen width 768px which is default). It worked perfectly on Omega where i had exactly the same settings, but now with my Zen sub theme, the menu doesn't change to a mobile friendly version when i reduce the browser width on safari. I have my site installed on localhost and looking at view source it shows:

&lt;meta name="MobileOptimized" content="width"&gt;
&lt;meta name="HandheldFriendly" content="true"&gt;
&lt;meta name="viewport" content="width=device-width"&gt;


Yet using the same site with omega theme it shows:

&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" &gt;  


Am i missing a setting on Zen to enable mobile responsive?

I have ticked all these settings on my zen sub theme:

Add HTML5 and responsive scripts and meta tags to every page.
 Add Respond.js JavaScript to add basic CSS3 media query support to IE 6-8.
 Add HTML5 shim JavaScript to add support to IE 6-8.
 Add meta tags to support responsive design on mobile devices.

Can anyone help?
I have just checked the Superfish project status and there are bug reports that Superfish breaks with jQuery versions 1.9 and above. Check what version of jQuery is loading and check if there are any Javascript errors in your browser console.

If that is the problem, you may have to wait for the next version update, or roll back to jQuery 1.8 for the time being.

Superfish jQuery 1.9 Bug Report