Prevent Smart app banner from showing on iPad

Question

I have a website that shows a smart app banner on iOS using an HTML meta tag. I want the banner only to show up on iPhones & iPods.

How can I prevent it from showing up on iPads?

Apple resource: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

The code I'm using (from the Apple resource):

<meta name="apple-itunes-app" content="app-id=myAppStoreID">

Answer 1

You'll have to do this using Javascript, since there is no proper way to do platform detection solely in HTML.

Get rid of the meta tag in your HTML code and use the following snippet, or just use parts of it, however you like. If you want to use it 'as-is', paste it at the bottom of the body.

(function($){
  var is_iPad = navigator.userAgent.match(/iPad/i) != null;

  // Fill in your Apple-App stuff here
  var app_id = "<YOUR_APPLE_APP_ID>",
      affiliate_data = null,
      app_argument = null;

  // exclude iPad
  if(!is_iPad) {
    var meta = $("<meta>"), content = 'app-id=' + app_id;
    meta.attr('name', 'apple-itunes-app');

    // Optional stuff (only when filled in)
    if(affiliate_data) content += ', affiliate-data=' + affiliate_data;
    if(app_argument) content += ', app-argument=' + app_argument;

    // Apply
    meta.attr('content', content);
    $('head').append(meta);
  }
}(jQuery));