Add support for iPhone in ASP.NET
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
Add support for iPhone in ASP.NET - Mads Kristensen Thank you for submitting this cool story - Trackback from DotNetShoutout
DotNetShoutoutWere 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 LamoreauxYes, 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 KristensenI 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 AtkinsonBecause 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 Kristensenlinks for 2009-04-17 links for 2009-04-17
SKOROZSI.NETI don't know why VS2008 don't give a default template for WAP website by default.
jackHi 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
emtwoPingback from webproasp.com Web Pro ASP - Active Server Page Development News
webproasp.comOw.. i'm using 3G conection mads :(
Sulumits RetsambewWe 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 campbellSome webpages uses images and which makes it hard to pinch pages. So yes, this Zoom level makes sense.
Sandra WadePingback from devwebpro.com Optimizing Your Site For Mobile Devices With ASP | WebProASP
devwebpro.comPingback from monserratedesi.yoursexualaids.net Iphone asp | Monserratedesi
monserratedesi.yoursexualaids.netComments are closed