Phone Does Not Abide By CSS Breakpoint For Navigation Controls

Greetings:

I believe my symptoms are fairly easy, however, I don't know where the problem lies.

I include a <meta> tag in my master page as follows:

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />

My CSS breakpoints for small devices is anything with a pixel width of 700px or less.

I use JavaScript to govern what menu is shown (out of 2 different menus possible) whether the viewport is <= to 700 or > than 700 as follows (nav is for viewports > 700; nav2 is for viewports <= 700:

$("document").ready(function () {
	$(window).on("resize", onResize);

	function onResize() {

		var WindowWidth = window.outerWidth;
		var nav2 = document.getElementById("nav2");

		if (WindowWidth <= 700) {
			nav2.hidden = false;
		}

		if (WindowWidth > 700) {
			nav2.hidden = true;
		}

	}
});

The Apple iPhone 5s which I use for testing smaller viewports has a resolution of 1136 x 640 (@ 326 ppi). When I hold the phone in the portrait position I see the menu for a small viewport since the viewport width is 640 which is <= 700px. When I hold the phone in the landscape position I still see the menu for a small viewport and not the menu for larger viewports > 700px.

What am I missing?

Much thanks for your assistance ... David Bach