How To Prevent (bootstrap) Fixed Top Navigation From Zooming On Mobile
Solution 1:
Keeping Bootstrap's navbar-top-fixed from zooming on mobiles
The final result:
On mobile devices only, is possible to calculate the zoom factor as the ratio of window.innerWidth and the screen width, as shown in [2]. When the user toggles zoom, the resize event is triggered; moreover, when a page is reloaded that was previously zoomed, the zoom factor is maintained. Thus, one use jQuery to dynamically update CSS transforms that keep the header in shape. Note that, with position: fixed, a transformation of the origin is also required. Applying class device-fixed-height to the bootstrap nav and device-fixed-width to brand logo and hamburger icon then produce very close to the desired result.
- Bug: As the page is zoomed, the hamburger icons still moves a bit to the left. Any suggestions how to fix it are appreciated!
- Tested on: Android 4.4
Live example: http://www.exploretrade.info/other/example-fixed-nav-after-zoom.html
Source code:
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="description"content=""><metaname="author"content=""><linkhref="../../fav.ico"><title>Bootstrap zoom-proof fixed top nav</title><!-- Bootstrap core CSS --><linkhref="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" ><!-- Custom styles for this template --><linkhref="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" ><style>body {
padding-top: 50px;
}
</style></head><body><navclass="navbar navbar-inverse navbar-fixed-top device-fixed-height"><divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed device-fixed-width"data-toggle="collapse"data-target="#navbar"aria-expanded="false"aria-controls="navbar"><spanclass="sr-only">Toggle navigation</span><iclass="fa fa-bars"></i></button><aclass="navbar-brand device-fixed-width"href="#">Example</a></div><divid="navbar"class="collapse navbar-collapse device-fixed-width"><ulclass="nav navbar-nav"><liclass="active"><ahref="#">Home</a></li><li><ahref="#about">About</a></li><li><ahref="#contact">Contact</a></li></ul></div><!--/.nav-collapse --></div></nav><divclass="container"><divclass="starter-template"><h1>Bootstrap starter template</h1><pclass="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in metus eget nisi imperdiet dictum ac eu metus. Morbi consequat sodales porta. Nam convallis sed dolor in ullamcorper. Vestibulum ut tortor porttitor, venenatis nulla iaculis, sollicitudin metus. Mauris ut hendrerit purus, sed ultricies lacus. Proin imperdiet, lectus vel efficitur hendrerit, quam tortor efficitur sapien, vehicula viverra magna ipsum vitae lacus. Sed faucibus elit vel massa placerat, in porttitor est suscipit. Pellentesque consequat condimentum elit, at sagittis erat euismod nec. Fusce consequat purus quis turpis volutpat, vel luctus tortor consectetur. Sed in lectus vitae enim fringilla faucibus. Mauris vitae risus ut ex convallis luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam tempor ante augue, sed iaculis nisi porta quis.</p></div></div><!-- /.container --><!-- Bootstrap core JavaScript
================================================== --><!-- Placed at the end of the document so the pages load faster --><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script><script>// from https://signalvnoise.com/posts/2407-device-scale-user-interface-elements-in-ios-mobile-safarifunctiongetDeviceScale() {
var deviceWidth, landscape = Math.abs(window.orientation) == 90;
if (landscape) {
// iPhone OS < 3.2 reports a screen height of 396px
deviceWidth = Math.max(480, screen.height);
} else {
deviceWidth = screen.width;
}
returnwindow.innerWidth / deviceWidth;
}
// mobile only - keep the position:fixed header at constant size when page is zoomedif (navigator.userAgent.match(/Mobi/)) {
$(window).on('load scroll', function() {
var ds = getDeviceScale();
$('.device-fixed-height').css('transform','scale(1,' + ds + ')')
.css('transform-origin', '0 0');
$('.device-fixed-width').css('transform', 'scale(' + ds + ',1)')
.css('transform-origin', '0 0');
})
}
</script></script></body></html>Solution 2:
The problem that you're seeing is because of the interaction between the header on the content div. The header is overlapping the content panel so when you zoom the header gets bigger and overlaps more content. If you separate the nav from the content it will probably solve your problem. The baseline bootstrap nav should be setup that way where the nave is above the main content container.
Remove the fixed position from the nav. Delete this:
position:fixed;
Remove the margin on the bottom of the nav:
margin-bottom: 27px;
Now your nav and content don't overlap and things zoom in a cleaner fashion. You also may want to add the img-responsive class to your logo which will help it scale correctly so it doesn't overlap the menu button on mobile.
 Fixed Top Navigation From Zooming On Mobile){kind=link}
Post a Comment for "How To Prevent (bootstrap) Fixed Top Navigation From Zooming On Mobile"