Android浏览器底部控制栏覆盖内容 [英] Android browser bottom control bar overlays content

问题描述

我在屏幕底部有一个固定定位的元素，除了Android浏览器(底部控制栏覆盖了我的元素)之外，该元素可以完美地工作.它甚至不会触发窗口调整大小事件来尝试并使用它.iOS Safari也具有底部控制栏，但是它可以正确推送我的元素，并且不会覆盖它.

I have a fix positioned element at the bottom of the screen which works perfectly except for the Android browser where the bottom control bar overlays my element. It doesn't even trigger the window resize event to try and work with that. iOS Safari also has the bottom control bar but it pushes my element correctly and it doesn't overlay it.

我愿意接受任何建议.

推荐答案

您可以尝试新的显示方式:全屏显示

You can try the new display: fullscreen

https://developers.google.com/web/updates/2017/04/nic58#fullscreen

从Android主屏幕启动渐进式Web应用程序时，它们以类似于应用程序的独立模式启动，该模式隐藏了多功能框.这有助于创建引人入胜的用户体验，并释放内容的屏幕空间.

When Progressive Web Apps are launched from the Android home screen, they launch in a standalone app-like mode that hides the omnibox. This helps create an engaging user experience, and frees up screen space for content.

但是，对于游戏，视频播放器或其他丰富内容等更身临其境的体验，移动用户界面元素(如系统栏)仍然会分散注意力，并占用您可能需要的宝贵像素.

However, for even more immersive experiences like games, video players, or other rich content, mobile UI elements such as the system bars can still be a distraction and take up valuable pixels that you may want.

现在，您可以通过在 Web应用清单中设置全屏显示，使您的Progressive Web App完全沉浸其中.

Now you can make your Progressive Web App feel fully immersive by setting display: fullscreen in your web app manifest.

从主屏幕启动应用程序时，所有非应用程序移动用户界面元素都将被隐藏.

When your app is launched from the home screen, all non-app mobile UI elements will be hidden.

这篇关于Android浏览器底部控制栏覆盖内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！