Chrome 当在触摸屏上全屏显示时，窗口内部高度不正确

ybzsozfc 于 12个月前发布在 Go

关注(0)|答案(3)|浏览(155)

当你在Android设备上使用全屏API全屏显示时，它工作正常，但是窗口内部高度不会正确更新，直到你再次触摸屏幕。
我正在使用

document.documentElement.requestFullscreen();

看到这个代码笔
https://codepen.io/Bob_mcbob/pen/gOBNLEo
也看下面的gif是记录在我的手机上。你会注意到屏幕大小最初说914当我去全屏，然后当我点击屏幕它跳下到866。
我相信这个48px的差异是底部导航栏。
我的问题是，为什么会发生这种情况？如何在不触摸屏幕的情况下强制刷新window.innerHeight？
这不会发生在iPhone（Safari）上，也不会发生在Firefox（Android）上，似乎是Chrome专用的，

google-chrome

来源：https://stackoverflow.com/questions/76373891/window-inner-height-incorrect-when-going-full-screen-on-andriod-until-touch

3条答案

按热度按时间

h5qlskok1#

呃，我刚刚遇到了这个错误，* 相当 * 肯定这是一个Chrome的错误，它发生在我全屏我的摄像头UI，唯一的选择是禁用全屏摄像头捕捉在Chrome上，我没有窗口跳转，或找到一种方法来强制重绘，以防止它认为页面比实际高48px（因此是绘图控件部分关闭屏幕底部）

赞(0）回复(0）举报 12个月前

cnh2zyt32#

到目前为止，我还没有看到一个适当的解决方案。现在，我使用的是这个链接中找到的修复程序的修改版本（https://css-tricks.com/the-trick-to-viewport-units-on-mobile/），但不是使用window.innerHeight，因为当前在触发全屏时有错误，我跟踪screen.height。

document.documentElement.style.setProperty('--screen-height', `${screen.height}px`);

你最好在页面加载时触发这个js。

.container {
    height: var(--screen-height);
}

<!DOCTYPE html>
<html lang="en" style="--screen-height: 100vh"><!-- initial fallback of screen height -->
    <body>
        <div class="container">CONTENTS</div>
    </body>
</html>

赞(0）回复(0）举报 12个月前

z9ju0rcb3#

我刚刚遇到了这个问题，补充说：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />

为我解决了这个问题，特别是viewport-fit=cover

赞(0）回复(0）举报 12个月前

我来回答

Chrome 当在触摸屏上全屏显示时，窗口内部高度不正确

3条答案

相关问题

热门标签

最新问答