<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.Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
”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.
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Most Valuable Expert award recognizes technology experts who passionately share their knowledge with the community, demonstrate the core values of this platform, and go the extra mile in all aspects of their contributions. This award is based off of nominations by EE users and experts. Multiple MVEs may be awarded each year.