asked on

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" />

Open in new window

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;
		}

	}
});

Open in new window

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

Dave Baldwin

I think you'll find that the reported screen resolution in JavaScript is half of the viewport resolution. Go to this page to see what is reported by Javascript: http://www.dibsplace.com/jscr.html

David Bach

ASKER

Hi Dave:

The link you suggested is interesting. I will bookmark this for future reference. Thank you.

I inserted 2 statements into my JavaScript method as follows:

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

	function onResize() {
		window.devicePixelRatio = 1;

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

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

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

		alert('the device pixel ratio is ' + window.devicePixelRatio);
	}
});

Open in new window

I received the alert indicating the devicePixelRatio =1, however I unfortunately did not see any change on my phone for the menu in the landscape position.

Thank you, Dave ...

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

David Bach

ASKER

Hi Dave:

WOW! ... I've been in IT for 40+ years. This is one of those things where a new nomenclature is needed. Ok! ... I accept what you have shown me and I thank you very much!!

Only if you care to share it with this question - Is there a rational why the physical viewport dimensions are not reported to CSS?

Thank you again, Dave!!

David Bach

ASKER

Thank you for your quick response and excellent information, Dave!!

Dave Baldwin

There is some way (which I can't remember now) to get the native resolution. What I suspect happened is that they realized that the native resolution made text too small to read on a phone so they decided to report and display pixels two for one.