<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.$("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.ASKER
$("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);
}
});
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.ASKER
ASKER
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
TRUSTED BY