asked on 3/12/2017

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

CSS JavaScript ASP.NET

Last Comment

Dave Baldwin

3/13/2017

Dave Baldwin

3/12/2017

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

3/13/2017

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

3/13/2017

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

David Bach

3/13/2017

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

3/13/2017

ASKER

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

Dave Baldwin

3/13/2017

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.