ipad

Hide address bar on iPhone, iPad and Android with JavaScript

If you want to constantly hide the address bar on mobile devices like iPhone, iPad and Android smartphones/tablets, then you have to scroll the window even if the device is turned:

<script type="text/javascript">
function hideAddressBar(){
  window.scrollTo(0, 1);
}
 
window.onload = hideAddressBar;
window.onscroll = hideAddressBar;
window.onresize = hideAddressBar;
window.onorientationchange = hideAddressBar;
</script>

Short version:

<script>
window.onload = window.onscroll = window.onresize = window.onorientationchange = function(){
  window.scrollTo(0, 1);
};
</script>

How to get the iPad viewport size with jQuery

Detecting the viewport size of an Apple iPad is very easy with jQuery. You just have to use the following code example:

    <script src="./js/jquery.js"></script>
    <script type="text/javascript">
      var width = $(window).width(); 
      var height = $(window).height(); 
      var pre = document.createElement('pre');
      pre.textContent = 'Viewport: '+width+'x'+height+' pixels';
      document.body.appendChild(pre);
    </script>

The viewport for an iPad in landscape mode (with address bar) is 1024×690 pixels.
The viewport for an iPad in portrait mode (with address bar) is 768×946 pixels.
The viewport for an iPad in portrait mode (with address bar and debug console) is 768×896 pixels.

If you want to hide the address bar in portrait mode then you have to add the website to your homescreen and their must be this meta tag in your website’s header:

<meta name="apple-mobile-web-app-capable" content="yes" />

The viewport for a fullscreen portrait mode is then 768×1004 pixels.
The resolutions are based on the following setting:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

If you do not have this setting (or if you use different values for it), then the viewport will be lager or even smaller.

iPad bouncen verhindern

Wer kleine Webseiten auf dem iPad hoch und runter gescrollt hat, wird sicherlich bemerkt haben, dass es dabei einen kleinen „bounce“-Effekt gibt, bei dem über den Rand der Seite hinaus gescrollt werden kann. Dieser Effekt sieht zwar nett aus, ist aber nicht immer wünschenswert.

Um diesen Bounce-Effekt abzuschalten, muss das Standardverhalten bei Touch-Events auf dem iPad verhindert werden. Das geht mit folgendem JavaScript-Schnippsel:

document.ontouchmove = function(event)
{
  event.preventDefault();
}

Es gibt übrigens folgende Touch-Events:

touchmove
touchstart
touchend
touchcancel