mobile-viewport.js

/**
 * mobile-viewport.js
 *
 * Simple script to hide the address bar on iPhone and iPod (when not in fullscreen app mode).
 */
(function () {
  var ADDR_BAR_HEIGHT = 60,
      app = document.getElementById('myDomEl'),
      ua = navigator.userAgent,
      iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
      ipad = ~ua.indexOf('iPad'),
      ios = iphone || ipad,
      fullscreen = !!navigator.standalone,
      resizeEvent = ('onorientationchange' in window) ? 'orientationchange' : 'resize';

  function hideAddressBar() {
    if (ios) {
      var height = document.documentElement.clientHeight;
      if (iphone && !fullscreen) height += ADDR_BAR_HEIGHT;
      app.style.height = height + 'px';
    }
    setTimeout(function () { window.scrollTo(0, 1); }, 1);
  }

  function listen(el, type, fn, capture) {
    if (null == el) return;
    if (el.addEventListener) {
      el.addEventListener(type, fn, !!capture);
    }
    else if (el.attachEvent) {
      el.attachEvent(type, fn, !!capture);
    }
    else {
      var name = 'on'+type.toLowerCase(), existing = el[name];
      el[name] = function () {
        if (existing) existing.apply(el, arguments);
        fn.apply(el, arguments);
      };
    }
  }

  listen(window, 'load', hideAddressBar, false);
  listen(window, resizeEvent, hideAddressBar, false);
})();