Full screen web pages (or modals) on iOS Safari

Because the top and bottom bars on iOS Safari slides up and down when scrolling, I was having some difficulty coding a full-screen page for it. $(window).height() on only gets the initial height upon page load, which includes the full header and footer bars. $(window).resize() wasn’t triggering when I scroll, either.

I ended up finding two possible approaches to the problem:

1. Use the minimal-UI viewport declaration for iOS

This is convenient because it doesn’t involve any JS work-arounds or extra code, except for one line of HTML in the header. It loads the screen without the expanded URL header bar and with the hidden bookmarks bar on the browser window. However, there are some cons for this approach:

Hiding the bottom bar makes it harder for people to save or bookmark the site. It’s not the default view, so some people may not realize that clicking on the site title or URL on the top of the screen will restore the hidden nav bars.

2. Use Javascript to detect the bar state and redraw the pageĀ 

The second method may be a bit of work since we’re adding JS to the page, but it will keep the default UI and I think this is better when it comes to bringing a web experience that your visitors are familiar with.

Of course, you may use what you think is best for your site or web app. Perhaps there are also other work arounds that I wasn’t able to find.

un-fixing the position of the navbar in mobile view on Bootstrap with CSS and jQuery

The floating navbar on responsive/mobile Bootstrap templates has a fixed position. But when the menu becomes longer, I needed to make it ‘relative’ in position so that the person can scroll down the items to see the other links.

jQuery

function mobile_header() {
     /* on mobile, opening the menu scrolls to top and removed the 
    'fixed' positioning so that if the menu is longer, 
    the user can scroll to see the menu items */

                $('.btn-navbar').click(function(){
                    $('html, body').animate({ scrollTop: 0 }, "slow");
                    if($('.btn-navbar').hasClass('open')){ 
                        $('.navbar').removeClass('mobile');
                        $(this).removeClass('open');
                    }
                    else {
                        $('.navbar').addClass('mobile');
                        $(this).addClass('open');
                    }
                });
}

LESS

 .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      height: 60px;
      z-index: 99;

      &.mobile {
        position: absolute;
      }
    }