Submit Your Article
When I was building the mobile TV guide I found that there are a couple of things needed to make the website look better on the iPhone and iPod. They both have some extra capabilities that is easy to utilize when you know how.
Zoom level
The first is the zoom level. By adding the meta-tag below, you can specify the viewport to fit perfectly with the iPhone/iPod. The meta-tag tells the Safari browser to zoom in to a specific level as specified. It was a trial and error process of finding the correct zoom level, but very easy as well.
<meta name=”viewport” content=”width=280, user-scalable=yes” />
Bookmark icon
Another tag tells Safari that when a website is bookmarked, it should use a specific icon to put on the dashboard of the iPhone or iPod. For some reason Apple invented a new link-tag for this instead of just supporting the favicon standard. The link-tag looks like this:
<link rel=”apple-touch-icon” href=”favicon.ico” />
Programmatically
Since the TV guide is made especially for mobile phones, it was important to keep the download size of the page as small as possible. That’s why I choose not to add these two tags by default, but only when the browser visiting the site was either an iPhone or iPod.
To do that programmatically, I simple added this method to my master page:
private void AddIPhoneHeaderTags()
{
string ua = Request.UserAgent;
if (ua != null && (ua.Contains(“iPhone”) || ua.Contains(“iPod”)))
{
HtmlMeta meta = new HtmlMeta();
meta.Name = “viewport”;
meta.Content = “width=280, user-scalable=yes”;
Page.Header.Controls.Add(meta);
HtmlLink link = new HtmlLink();
link.Attributes["rel"] = “apple-touch-icon”;
link.Href = “favicon.ico”;
Page.Header.Controls.Add(link);
}
}
Of course, these two tags will work for all websites – not just the ones made especially for mobile phones.
Topics: ASP, Programming, Web Development
