Question

我的网站在主体中有一个用于滚动内部元素的包装器，问题（我假设）是移动safari无法识别滚动因此网址栏没有调整大小。有替代品吗？

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: scroll;
}

通过此设置，移动safari不会像您通常在其他网站上滚动那样“缩小”网址栏。

Answer 1

对于移动设备，请添加此元标记<meta name="apple-mobile-web-app-capable" content="yes" />

或试试这个：

window.addEventListener("load", function () {
        // Set a timeout...
        setTimeout(function () {
            // Hide the address bar!
            window.scrollTo(0, 0);
        }, 0);
    });

Answer 2

我的解决方案是在包装器div中删除position：absolute并将其替换为：

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

Answer 3

关键在于删除overflow: scroll; 这样您就可以使用了（即缩小滚动条上的网址栏）

网页网址栏在手机游戏中没有“缩小”

3 个答案: