CODEWITHSUNDEEP
htmliosresponsive-design
tgwizard
tgwizard

Reputation: 161

Why are smart app banners partially/completely hidden in Safari when I have viewport specified?

I want to add smart app banners to link to an app in the Apple App Store. It seems to work fine when I don't have a viewport metatag specified. If I have a fully mobile friendly viewport, the smart app banner is hidden completely "behind the address bar" after page load, and if I have a viewport with width 840 specified, the smart app banner is partially hidden by the address bar.

Why is this, and can I make it so that the smart app banner is always completely shown?

Working, no viewport

The smart app banner is shown correctly. You can scroll to hide it.

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

Test page

Correct smart app banner

Completely hidden, responsive

The smart app banner is hidden behind the address bar (you can see a blurry blue Facebook logo). You can scroll to hide/show it.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-itunes-app" content="app-id=284882215">```

Test page

Fully hidden smart app banner

Partially hidden, viewport width=840

The smart app banner is partially hidden behind the address bar. You can scroll to hide it/show it completely.

<meta name="viewport" content="width=840, user-scalable=yes" />
<meta name="apple-itunes-app" content="app-id=284882215">

Test page

Partially hidden smart app banner

This can only really be tested in Safari on a real iPhone, and it is easiest to do it in Private Mode, as the appearance of the smart app banner changes if you scroll / reload the page.

Upvotes: 16

Views: 5436

Answers (3)

Kristfal
Kristfal

Reputation: 634

This issue also affects universal app link banners.

A vanilla javascript solution which worked for us was: 

window.onload = function() {
  window.scrollTo(0, -100);
};

Upvotes: 3

Esteban Saiz
Esteban Saiz

Reputation: 21

Use <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1"> and it would show the smart banner.

Upvotes: 2

f0rz
f0rz

Reputation: 1565

Initially force window to scroll top solved the issue for me. 

<script type="text/javascript">
    $(window).load(function() {
        $(window).scrollTop(-100);
    });
</script>

Upvotes: 5

Related Questions