troubleshooting Question

Phone Does Not Abide By CSS Breakpoint For Navigation Controls

Avatar of David Bach
David BachFlag for United States of America asked on
6 Comments1 Solution173 ViewsLast Modified:

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
Join our community to see this answer!
Unlock 1 Answer and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros