当你在Android设备上使用全屏API全屏显示时,它工作正常,但是窗口内部高度不会正确更新,直到你再次触摸屏幕。
我正在使用
document.documentElement.requestFullscreen();
看到这个代码笔
https://codepen.io/Bob_mcbob/pen/gOBNLEo
也看下面的gif是记录在我的手机上。你会注意到屏幕大小最初说914当我去全屏,然后当我点击屏幕它跳下到866。
我相信这个48px的差异是底部导航栏。
我的问题是,为什么会发生这种情况?如何在不触摸屏幕的情况下强制刷新window.innerHeight?
这不会发生在iPhone(Safari)上,也不会发生在Firefox(Android)上,似乎是Chrome专用的,
3条答案
按热度按时间h5qlskok1#
呃,我刚刚遇到了这个错误,* 相当 * 肯定这是一个Chrome的错误,它发生在我全屏我的摄像头UI,唯一的选择是禁用全屏摄像头捕捉在Chrome上,我没有窗口跳转,或找到一种方法来强制重绘,以防止它认为页面比实际高48px(因此是绘图控件部分关闭屏幕底部)
cnh2zyt32#
到目前为止,我还没有看到一个适当的解决方案。现在,我使用的是这个链接中找到的修复程序的修改版本(https://css-tricks.com/the-trick-to-viewport-units-on-mobile/),但不是使用
window.innerHeight
,因为当前在触发全屏时有错误,我跟踪screen.height
。你最好在页面加载时触发这个js。
z9ju0rcb3#
我刚刚遇到了这个问题,补充说:
为我解决了这个问题,特别是viewport-fit=cover