Scribd
Upload
26 views3 pages

Iphone Specific Techniques

The document provides techniques for optimizing a website for the iPhone and other mobile devices, including adding a custom home screen icon, setting the viewport to automatically zoom content, using an iPhone-specific stylesheet, controlling image sizes, styling links, and centering content. It also lists fonts supported on the iPhone.

Uploaded by

Jaydeep Choudhari
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views3 pages

Iphone Specific Techniques

The document provides techniques for optimizing a website for the iPhone and other mobile devices, including adding a custom home screen icon, setting the viewport to automatically zoom content, using an iPhone-specific stylesheet, controlling image sizes, styling links, and centering content. It also lists fonts supported on the iPhone.

Uploaded by

Jaydeep Choudhari
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

iPhone Specific Techniques

Adding a Home Screen Icon


iPhone and iPod Touches have a built-in feature that allows users to add your site to their
home screen as an icon. You can customize this icon simply by placing a file in your root
directory titled “apple-touch-icon.png” (make sure the image is at least 57×57). Alternatively,
you can place the following snippet in your HTML:

<link rel="apple-touch-icon" href="/filename.png" />

Obviously, you’ll customize the file path and name for your own image.

Viewport: Default Zoom


Your site might have built-in white space that looks great on a desktop but this will add an
extra zoom in step for iPhone users who don’t wish to see that white space because it cuts
down the readability and size of the main content. Use the following snippet to automatically
zoom into the width of your content.

<meta name="viewport" content="width=320;" />

The “width=320;” determines the magnification level of the content. Set this number to
whatever is appropriate for your content (320 pixels is the width of the iPhone screen in a
vertical orientation).

iPhone Specific Stylesheet


If you want to create CSS that only applies to your iPhone users, use the following code:

<link media="only screen and (max-device-width: 480px)"


href="iphone.css" type="text/css" rel="stylesheet" />
<!-- Start iPhone -->
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;" />
<link rel="apple-touch-icon" href="/iphone.png" />
<link media="only screen and (max-device-width: 480px)" href="/iphone.css"
type= "text/css" rel="stylesheet" />
<!-- End iPhone -->

This targets only devices with a maximum screen width of 480 pixels, namely iPhones and
iPod Touches.

Control your images


Images are another element that you may want to consider. Chances are that many of your
images exceed the width of most mobile browsers, which may or may not automatically
resize them. Fortunately, we can apply a maximum-width to our images that will help insure
their proper scaling in supportive browsers. The trick is choosing a max-width that
accommodates the widest variety of mobile devices. As an example, here is how to apply a
max-width of 250px for all images in our main content <div>:

#content img {
max-width: 250px;
}

Link me deadly
Last but not least, links are perhaps the most important element on the mobile page. When
easily identifiable, links help visitors navigate easily and efficiently. When poorly styled or
otherwise obscure, links are essentially useless, leaving your visitors groping in the dark for
their next move. Thus, when styling your mobile links, it is good practice to emulate
conventional link appearance with an underline, distinguished color, and perhaps a slightly
contrasting background color to boot. Here is an example that keeps links looking crisp and
clean:

a:link, a:visited {
text-decoration: underline;
color: #0000CC;
}
a:hover, a:active {
text-decoration: underline;
color: #660066;
}

Front and center


Centering headings, footer credits, and other information is a uesful way to bring a sense of
organization and balance to your mobile presentation. Here is an easy way to do so:

.center {
width: 100% !important;
text-align: center;
}

Fonts on the iPhone[http://www.iphonewebdev.com/examples/]


 American Typewriter
 Arial
 Arial Rounded MT Bold
 Courier
 Courier New
 Georgia
 Helvetica
 Helvetica Neue
 Marker Felt
 Times New Roman
 Trebuchet MS
 Verdana
 Zapfino

(Use the link below for Black berry)

http://roopeshreddy.wordpress.com/2010/10/25/developing-web-applications-for-blackberry-
mobiles-using-microsoft-asp-net/

You might also like