iOS Smart App Banners - showing different app on iPad and on iPhone

Question

I have 2 iOS Apps published on Apple App Store, one is an iPhone App and the other is an iPad App, And I need to use iOS Smart App Banners on my website, so I included 2 meta tags for both applications.

<meta name="apple-itunes-app" content="app-id=iPhoneAppID" />
<meta name="apple-itunes-app" content="app-id=iPadAppID" />

And I was expecting that the browser should know the correct app to display to the user whenever he visit my website, but it didn't.

So what I need is a way to show the iPhone app in the iOS Smart App Banners if the use is visiting from iPhone browser, and the iPad app if he is visiting from iPad browser.

Answer 1

OK, I think I found the solution, but it's not from Apple, and it's a jQuery Plugin: http://www.dunnsolutions.com/content/application-development-blog/-/blogs/smart-app-banners-for-ios-and-android

"If you have two versions of apps in the App Store (for example, one for iPad and another for iPhone/iPod), you may use JavaScript to check the browser’s user agent and determine the appropriate meta tag to insert into head of your web page."

if ( /(iPad).*AppleWebKit.*Mobile.*Safari/.test(navigator.userAgent) ) {
  var headNode = document.getElementsByTagName("head")[0];
  var sbNode = document.createElement('meta');
  sbNode.name = 'apple-itunes-app';
  sbNode.content = 'app-id=your-iPadAppId';
  headNode.appendChild(sbNode);
} else if ( /(iPhone|iPod).*AppleWebKit.*Mobile.*Safari/.test(navigator.userAgent) ) {
  var headNode = document.getElementsByTagName("head")[0];
  var sbNode = document.createElement('meta');                    
  sbNode.name = 'apple-itunes-app';                
  sbNode.content = 'app-id=your-iPhoneAppId';
  headNode.appendChild(sbNode);
}