Avatar of David Bach
David BachFlag for United States of America

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
CSSJavaScriptASP.NET

Avatar of undefined
Last Comment
Dave Baldwin
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

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
Avatar of David Bach
David Bach
Flag of United States of America image

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
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Blurred text
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
Avatar of David Bach
David Bach
Flag of United States of America image

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!!
Avatar of David Bach
David Bach
Flag of United States of America image

ASKER

Thank you for your quick response and excellent information, Dave!!
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

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.
ASP.NET
ASP.NET

The successor to Active Server Pages, ASP.NET websites utilize the .NET framework to produce dynamic, data and content-driven web applications and services. ASP.NET code can be written using any .NET supported language. As of 2009, ASP.NET can also apply the Model-View-Controller (MVC) pattern to web applications

128K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo