How to detect SmartBanner
<p>A smartbanner is apple's direct link to the app store.  <a href="https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html" rel="nofollow">https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html</a></p>

<p>I am trying to have the smart banner show on the top of the page, content below it, and the nav bar on the bottom.  The issue I run into is the smart banner is not counted as part of screen height.  If you were to do either:</p>

<pre><code>height: 100%;
screen.innerHeight;
height: 100vh;
</code></pre>

<p>or any other typical request for screen height, it ignores the presence of the smart banner and pushes content offscreen by the delta of the smart banner's height.</p>

<p>I am trying to detect if the smart banner is showing on an iOS device to ensure the page fits the window screen regardless of its presence and updates height accordingly.  What I've found is that the smart banner shows after the document is ready, and doesn't affect window height.  Is there a simple way to detect if the user is being shown the smart banner?</p>

<pre><code>$(document).ready(function() {

  heightResize($(".container"));

  $(window).resize(function() {
    heightResize($(".container"));
    $(".container").append("&lt;div class='banner'&gt;this is your dynamically created banner&lt;/div&gt;");
    $(".container").height($(".container").height()+$(".banner").height());
  });
});

function heightResize(element) {
  element.height($(window).height()-20);
  $("p").text(element.height());
}
</code></pre>

<p>Code like this will be pushed off the screen by the smart banner after the page finishes loading.</p>