14 Comments

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

Comment by 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.

Comment by 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?

Comment by 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.

Comment by 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

Comment by 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