英文:
PWA fullscreen mode incorrect page height
问题
PWA应用程序在清单中定义的全屏模式下,页面高度比视口大小大。它不依赖于页面内容,并且即使在空白页面上也会持续存在。
这会导致页面出现额外的过度滚动,并使"position: fixed"元素随滚动上下移动。有没有办法修复它?
我还在stackoverflow上找到了完全相同的主题,但仍然没有解决方案:
- https://stackoverflow.com/questions/76013413/chrome-mobile-pwa-fullscreen-app-area-exeeds-html-height
- https://stackoverflow.com/questions/76234229/fullscreen-home-screen-web-app-on-android-phone-has-48px-overflow-in-chrome-h?noredirect=1&lq=1
这个行为最近出现,复现版本为Chrome 114.0.5735.130,Android 9,Redmi 6A Build/PPR1.180610.011。
在应用程序设置中删除Chrome更新可以解决问题,但预装的Chrome版本是80.0,太旧了。
英文:
PWA application in fullscreen mode defined in manifest has bigger page height than viewport size. It does not depend on the content of the page and persists even on a blank page.
This causes an extra overscroll to appear on the page and "position: fixed" elemets to move up and down with the scroll. Is there any way to fix it?
I also found exactly the same topics on stackoverflow, but there is still no solution:
- https://stackoverflow.com/questions/76013413/chrome-mobile-pwa-fullscreen-app-area-exeeds-html-height
- https://stackoverflow.com/questions/76234229/fullscreen-home-screen-web-app-on-android-phone-has-48px-overflow-in-chrome-h?noredirect=1&lq=1
This behavior appeared recently and is reproduced with chrome version 114.0.5735.130, Android 9, Redmi 6A Build/PPR1.180610.011
Removing chrome updates in app settings fixes the problem, but the preinstalled Chrome version is 80.0 and it is too old.
答案1
得分: 1
- 在PWA清单中,将
fullscreen
替换为standalone
:
display: "standalone"
- 在JavaScript代码中,对根元素调用requestFullscreen():
document.documentElement.requestFullscreen()
注:这种解决方案的小缺点是需要与应用程序进行最近的用户交互。
英文:
It worked for me with several Android devices:
- In the PWA manifest, replace
fullscreen
withstandalone
:
display: "standalone"
- In the Javascript code, call requestFullscreen() on the root element:
document.documentElement.requestFullscreen()
NB: The little drawback with that solution is that it requires a recent user interaction with the app.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论