html – 当我指定了视口时,为什么智能应用横幅部分/完全隐藏在Safari中？

我想添加 smart app banners链接到苹果App Store中的应用程序.当我没有指定视口元标记时,它似乎工作正常.如果我有一个完全移动友好的视口,智能应用程序横幅在页面加载后完全隐藏在地址栏后面,如果我有一个具有宽度840的视口,则智能应用程序横幅被地址栏部分隐藏.

为什么这样,我可以做到这一点,智能应用横幅总是完全显示出来吗？

工作,没有视口

智能应用横幅显示正确.你可以滚动来隐藏它.

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

Test page

完全隐藏,反应灵敏

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

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

Test page

部分隐藏,viewport width = 840

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

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

Test page

这只能在真正的iPhone上真正地在Safari中测试,并且在私人模式下最容易进行测试,因为如果滚动/重新加载页面,智能应用程序横幅的外观会发生变化.

解决方法

最初强制窗口滚动顶部解决了我的问题.

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

原文地址：https://www.jb51.cc/html/230161.html