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.

Comments

DotNetShoutout

Add support for iPhone in ASP.NET - Mads Kristensen Thank you for submitting this cool story - Trackback from DotNetShoutout

DotNetShoutout
Brig Lamoreaux

Were you aware of the Mobile Device Browser File that the Windows.Live team provided? The file looks at header information and then provides properties to the Request.Browser object. Very useful for your situation. Link to file: http://mdbf.codeplex.com/ Link to Scott Hanselman's use with it http://www.hanselman.com/blog/MixMobileWebSitesWithASPNETMVCAndTheMobileBrowserDefinitionFile.aspx

Brig Lamoreaux
Mads Kristensen

Yes, I know about the Device Browser File but for this purpose alone, I thought it was overkill. I only check the user agent in this particular method. It is however a very nice option when dealing with mobile sites in many other cases. Thanks for the links.

Mads Kristensen
Dan Atkinson

I have to ask... Why go to the trouble of selectively adding in the meta headers for mobile phones when nothing bad happens when viewed on traditional desktop browsers?

Dan Atkinson
Mads Kristensen

Because when building sites for mobile phones, you have to be very careful with the use of bandwidth. A lot of people (and devices) don't have WIFI, 3G, EDGE or HSDPA and thus an extremely slow connection. So all bytes count. I'll admit that a few meta-tags are not a huge issue, but as longs as it doesn't hurt the maintainability of the app, then why not? Besides, I like strange micro optimizations. In the end, they accumulate to a macro.

Mads Kristensen
SKOROZSI.NET

links for 2009-04-17 links for 2009-04-17

SKOROZSI.NET
jack

I don't know why VS2008 don't give a default template for WAP website by default.

jack
emtwo

Hi Mads I have BlogEngine.net running on my site and it's the ONLY thing I can't update from my iphone. The editor in BE isn't recognised by the iPhone as editable. I've tested it on the latest version of TinyMCE too to no avail. It's a big issue really as I do alot of mobile updating and sadly I can't anymore. Any news on 1. an iphone app for BE or 2. why the web install won't let me update? Thanks

emtwo
webproasp.com

Pingback from webproasp.com Web Pro ASP - Active Server Page Development News

webproasp.com
Sulumits Retsambew

Ow.. i'm using 3G conection mads :(

Sulumits Retsambew
john campbell

We are registered and approved under the manufacturers of all kinds of electronics,such as Mobile Phones, Discman,laptops,ipods,Digital Cameras,playstations,Car Stereo(blaster),MP3 Player,Audio CDs,,DVDs,,VCDs,and some Musical Instruments. LIKE NOKIA N96, N93i, n92,n98,Sony Ericsson I-imate Jam.,nextel ,laptop. palm Treo Apple 20 and all kind of electoirce, please contact us for more information via cellphonehouse@gmail.com or cellphonehouse@hotmail.com

john campbell
Sandra Wade

Some webpages uses images and which makes it hard to pinch pages. So yes, this Zoom level makes sense.

Sandra Wade
devwebpro.com

Pingback from devwebpro.com Optimizing Your Site For Mobile Devices With ASP | WebProASP

devwebpro.com
monserratedesi.yoursexualaids.net

Pingback from monserratedesi.yoursexualaids.net Iphone asp | Monserratedesi

monserratedesi.yoursexualaids.net

Comments are closed