PWA全屏模式页面高度不正确。

huangapple go评论119阅读模式
英文:

PWA fullscreen mode incorrect page height

问题

PWA应用程序在清单中定义的全屏模式下,页面高度比视口大小大。它不依赖于页面内容,并且即使在空白页面上也会持续存在。
这会导致页面出现额外的过度滚动,并使"position: fixed"元素随滚动上下移动。有没有办法修复它?

我还在stackoverflow上找到了完全相同的主题,但仍然没有解决方案:

这个行为最近出现,复现版本为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:

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

  1. 在PWA清单中,将fullscreen替换为standalone
display: "standalone"
  1. 在JavaScript代码中,对根元素调用requestFullscreen()
document.documentElement.requestFullscreen()

注:这种解决方案的小缺点是需要与应用程序进行最近的用户交互

英文:

It worked for me with several Android devices:

  1. In the PWA manifest, replace fullscreen with standalone:
display: "standalone"
  1. 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.

huangapple
  • 本文由 发表于 2023年6月26日 18:59:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/76556063.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定