javascript - Android浏览器底部控制栏覆盖内容

标签 javascript css mobile android-browser mobile-browser

我在屏幕底部有一个固定定位的元素,除了底部控制栏覆盖我的元素的 Android 浏览器外,它工作完美。它甚至不会触发窗口调整大小事件来尝试使用它。 iOS Safari 也有底部控制栏,但它会正确推送我的元素,但不会覆盖它。

我愿意接受任何建议。

最佳答案

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

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

当从 Android 主屏幕启动 Progressive Web Apps 时,它们会以隐藏多功能框的类似应用程序的独立模式启动。这有助于打造引人入胜的用户体验,并为内容释放屏幕空间。

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

现在,您可以通过在网络应用程序 list 中设置 display: fullscreen 让您的 Progressive Web App 感觉完全身临其境。

当您的应用从主屏幕启动时,所有非应用移动 UI 元素都将被隐藏。

关于javascript - Android浏览器底部控制栏覆盖内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27357033/

相关文章:

html - 将鼠标悬停在图像上时放大 - CSS 和 HTML

html - 如何将样式限制为仅部分 HTML

html - 我无法创建有序表单

c# - 为什么我的标签没有出现?

css - 手机菜单不显示在手机上,只显示在桌面上

css - 李 :before content: "✔ "; different color on some mobile devices

变量的 JavaScript 设置值失败

Javascript - 文本输入属性

javascript - 设置存储在数组中的对象的属性

javascript - Meteor:在响应 HTTP post 请求之前返回 Promise