Zoom out issue on mobile devices - css

Question

I am in the process of building my website and I'm having an issue that I can't figure out how to fix! It's driving me mad!
I have a menu that animates in from the left hand side of the page and is fixed at width 100% and height 100%.
It works fine on on my laptop but when I view it on my iPhone the menu seems to 'zoom out' when the menu is activated.
If anyone could help me with this i would really appreciate it.
CSS
nav {
width:100%;
right:100%;
background:#111725;
overflow-x:scroll;
z-index:5;
height:100%;
}
JS
$("#menuToggle").click(function(){
$("#navToggle").toggleClass('active');
$("main,header,.twitterToggle,.searchToggle").toggleClass('pushLeft');
$("nav").toggleClass('navLeft');
$("nav ul li").toggleClass('fadeUp');
});
HTML
<div id="menuToggle"><a id="navToggle"><span></span></a>MENU</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
<li>
</li>

Answer 1

Toggle .is-locked class on body on the click function. So, you jquery code would be.
$("#menuToggle").click(function(){
$('body').toggleClass('is-locked');
$("#navToggle").toggleClass('active');
$("main,header,.twitterToggle,.searchToggle").toggleClass('pushLeft');
$("nav").toggleClass('navLeft');
$("nav ul li").toggleClass('fadeUp');
});
And add the following CSS
.is-locked {
overflow-x: hidden;
}
Also remove overlow-x:scroll from nav.