html - 当我指定了视口(viewport)时，为什么智能应用程序横幅会部分/完全隐藏在 Safari 中？

Question

我要添加smart app banners链接到 Apple App Store 中的应用程序。当我没有指定视口(viewport)元标记时，它似乎工作正常。如果我有一个完全适合移动设备的视口(viewport)，智能应用横幅在页面加载后会完全隐藏在“地址栏后面”，如果我有一个指定宽度为 840 的视口(viewport)，智能应用横幅会被地址栏部分隐藏。

这是为什么，我能否做到始终完整显示智能应用横幅？

正在工作，没有视口(viewport)

智能应用横幅显示正确。您可以滚动以隐藏它。

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

Test page

完全隐藏，响应式

智能应用程序横幅隐藏在地址栏后面(您可以看到模糊的蓝色 Facebook Logo )。您可以滚动以隐藏/显示它。

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

Test page

部分隐藏，视口(viewport)宽度=840

智能应用横幅部分隐藏在地址栏后面。您可以滚动以完全隐藏/显示它。

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

Test page

这只能在真实 iPhone 上的 Safari 中真正测试，并且最容易在私有(private)模式下进行，因为如果您滚动/重新加载页面，智能应用横幅的外观会发生变化。

Answer 1

最初强制窗口滚动到顶部为我解决了这个问题。

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