Creating a WebClip Bookmark Icon

admin — Wed, 16 Jan 2008 21:16:15 +0000

If you want to make a custom icon for your website that will show up in the Springboard when a user makes a “webclip”, using their iPhone or iPod Touch, all you need to do is:

1. Create a 57×57 pixel PNG image

2. Name the image “apple-touch-icon.png”

3. Copy it to the root folder of your website

If you want more flexibility i.e. you don’t have access to the root of your site or you want to use a different file name or format, then you can use a link tag in the head of the document, such as:

iHelloWorld

If you do use an image that is larger than 57×57 pixels it will be scaled down automatically for you. Also, Safari will automatically composite the icon with the standard “glassy” overlay so it looks like a built-in iPhone or iPod application should your imaging skills be as bad as mine!.

Note: There is some degree of clipping off the sides of the icon that can’t really be controlled. If you scale down a circular logo (in EPS format) to 57×57, there is a noticeable clip on the sides. With that in mind, I recommend adding a pixel or two on the sides if you’re using a circular design. Note that scaling the icon down under 57×57 does not solve this, it merely scales it up to fit the 57×57.

iPhone window.onorientationchange Code

admin — Sun, 13 Jan 2008 21:58:23 +0000

Apple has put up some sample code that shows off the new window.onorientationchange and window.orientation ability that lets you detect the orientation of the iPhone.

You setup your HTML with a body tag with the class of “portrait” or “landscape” and most of the CSS goes from that. You also put an empty div with the id of currentOrientation that is used for some of the magic.

Below is a simple JavaScript handler:

window.onorientationchange = function() {
/*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
left, or landscape mode with the screen turned to the right. */
var orientation = window.orientation;

switch(orientation)
{

case 0:
/* If in portrait mode, sets the body’s class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
in the iPhoneOrientation.css file will be selected and used to style “Handling iPhone or iPod touch Orientation Events”. */
document.body.setAttribute(“class”,”portrait”);

/* Add a descriptive message on “Handling iPhone or iPod touch Orientation Events” */
document.getElementById(“currentOrientation”).innerHTML=”Now in portrait orientation (Home button on the bottom).”;
break;

case 90:
/* If in landscape mode with the screen turned to the left, sets the body’s class attribute to landscapeLeft. In this case, all style definitions matching the
body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style “Handling iPhone or iPod touch Orientation Events”. */
document.body.setAttribute(“class”,”landscapeLeft”);

document.getElementById(“currentOrientation”).innerHTML=”Now in landscape orientation and turned to the left (Home button to the right).”;
break;

case -90:
/* If in landscape mode with the screen turned to the right, sets the body’s class attribute to landscapeRight. Here, all style definitions matching the
body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style “Handling iPhone or iPod touch Orientation Events”. */
document.body.setAttribute(“class”,”landscapeRight”);

document.getElementById(“currentOrientation”).innerHTML=”Now in landscape orientation and turned to the right (Home button to the left).”;
break;
}
}

iPhone Developer News » Tutorials

Creating a WebClip Bookmark Icon

iPhone window.onorientationchange Code