Question

我的问题是黑客对100vh和隐藏在移动浏览器栏后面的区域之间的可疑移动浏览器存在歧义。对于任何需要全屏效果的页面来说，这都是一个问题。

hack检测VH和实际可见视口之间的差异。但是，第一个代码示例中的简单js似乎正在向后检测它。因此，如果浏览器栏被覆盖，则该值应为75，但应为0，同样，当浏览器较大时，其应返回0，但应返回-75。

只需在google.com上的Safari中使用“开发”工具对iPhone进行测试，然后在控制台中输入它，即可轻松复制出来。

document.documentElement.clientHeight - window.innerHeight

这似乎是计算较短的浏览器高度，其顶部偏移量是为了补偿浏览器栏偏移量为0，而浏览器高度较高时，浏览器栏不再以-75px覆盖页面顶部。在我看来，这似乎是非常错误的，应分别为75和0。下面的示例是我认为应该如何正确地将body标签偏移到具有绝对定位的位置元素上的方法。

function fixIt(){
    var offset = (document.documentElement.clientHeight - window.innerHeight);
    document.body.style.marginTop = offset;
}
fixIt(); // run on resize

我的超级超级hacky解决方案，默认情况下将主体偏移75像素，并在垂直调整大小时分配旧值。（因此，当浏览器栏隐藏时，请使用先前的偏移量0而不是75px的偏移量，并保存75px的偏移量以用于下一次调整大小）。可以在Mobile Chrome和Mobile Safari中使用，但是例如，如果在没有浏览器栏和没有调整大小事件的facebook中打开链接，则它将永久偏移75px。这段代码显然是疯了，应该放到所有内容中。

var offset;
var oldOffset = 75px;
function fixIt(oldOffset){
    offset = (document.documentElement.clientHeight - window.innerHeight);
    document.body.style.marginTop = oldOffset;
    oldOffset = offset;
    return oldOffset;
}
fixIt(oldOffset); // run on resize

顺便说一句，或供进一步阅读，这里是有关此问题的大型投诉博客。 https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html我同意浏览器供应商的意见，即VH应该保持恒定（因为回流会导致除实际身高之外的所有事情变得令人讨厌），但对于移动设备上的body和html标签等顶级元素，此行为似乎是错误的并且没有语义上的意义，而且这些计算出的数字向后显示，进一步使此问题令人头痛。

还有哪些其他解决方案？

在js中检测移动设备上的VH并返回其当前值

0 个答案: