How to Save Space on the iPhone Screen

When you design websites for the relatively small iPhone screen, every pixel is precious. The script shown here is designed to scroll the page down automatically, hiding the address bar and giving you more space for your designs.

HTML5 and CSS 3 make it possible to add many types of animations and design elements to your pages, but for the most advanced interactive features on the web, you need to use a little JavaScript or PHP or another type of programming.

This JavaScript slides the window 60 pixel rows up. That gives back the nearly 15 percent of screen real estate that the URL field takes up at the top of the browser window. When you add this JavaScript to a web page, it will automatically hide the address bar in Safari on the iPhone and the iPod touch without affecting any other browsers.

This script is ignored by Firefox, Internet Explorer, and even Safari when it’s used on an iPad or a computer.

Here’s the code that makes this work. Simply add this code to the bottom of any web page, just before the </body> tag:

window.onload = function() {
setTimeout(function(){window.scrollTo(0, 1);}, 100);

This script was published by Apple in 2007 when the first iPhone was released. The script tags tell HTML that JavaScript is coming: In HTML5, JavaScript is the default scripting language, so you don’t need to have anything in that tag but script. Here’s how it works:

  1. The first line, window.onload = function() {, tells the browser to run this script when the page first loads.

  2. The second line, setTimeout, waits one-tenth of a second (defined by the numeral 100 at the end of that line).

  3. After one-tenth of a second, function(){window.scrollTo(0, 1);} executes and scrolls the window to the x coordinate 0 and the y coordinate y, better known as the top of the page.

If you’re completely new to programming, check out the JavaScript introduction at the w3Schools website.

blog comments powered by Disqus

Inside Sweepstakes

Win $500. Easy.