Question

我正在使用PhoneGap构建开发移动应用-因此使用HTML / CSS / JS

我的应用程序在android和iphone上运行良好，但是在iPad上缩放错误，导致商店拒绝了该应用程序。

要恢复正确的宽高比以固定缩放比例，我添加了以下代码：

    var body = document.getElementsByTagName("html");
    for(var i = 0; i < body .length; i++)
    {
        body [i].style.paddingTop = "56.25%";
    }

这完全符合预期，但是：

现在，当我滚动到页面底部时，它将突然停止在底部填充的开头。

然后，我必须再次滚动才能到达页面底部，就像在滚动其他元素一样。然后，当我向上滚动时，同一件事发生在距顶端相同的距离处。

使用Chrome中的元素检查器，我可以看到设置的填充是问题所在。

这是我检测到设备为iPad后要处理的html标签：

html 
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--royalpaleblue);
    text-align: center;
    padding: 0;
    margin: 0;
    overflow: hidden;
    z-index: 0;
    font-family: Ubuntu, "times new roman", times, roman, serif;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome and Opera */

    overflow-y: scroll !important; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch !important;

    padding-bottom: 0%;
}

我不确定是什么原因导致的，并且我在网络上找不到任何内容，所以有没有办法让滚动忽略填充并继续到页面底部？

CSS底部填充页面停止滚动？

0 个答案: