移动浏览器与桌面浏览器在加载Web应用程序方面有何不同？

问题描述

当我尝试渲染position: fixed左导航时，我发生了一些非常奇怪的事情。对于台式机，它可以完美呈现，并且在分辨率与移动设备相同的台式机页面 上可见：

但是，当使用firefox（或Chrome）的iPad / iPhone模拟器时，有时看起来像这样：

您可以清楚地看到，左侧导航栏的底部遵循应用于其的bottom: 0属性，对于移动浏览器，bottom: 0超出了视口的末端。在同一页面上，它比其他页面上要长得多

当我在firefox的开发工具上关闭触摸模拟时，这将不再是一个问题。

这是我使用的CSS：

nav.left-nav {
    width: @navWidth;
    background: @navBackground--dark;
    font-size: @fontSizeBase;
    line-height: @lineHeightBase;
    position: fixed;
    z-index: @zIndex-2;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    transition: @leftNavAnimation;

    .theme--light & {
        background: @navBackground--light;
    }

    &--closed {
        transform: translateX(-@navWidth);
        pointer-events: none;
    }
}

解决方法

代替... bottom：0; 使用...

height:calc(100% - 0px);