fullscreen - Hide address bar in Progressive Web Applications
问题描述
I'm developing a PWA with VueJS. I started testing my application in real devices (Add to home screen). My application is intended to be 100% height, as it displays a map as you can see:
It seems that sometimes, transitions that appear from outside the viewport height, makes the address bar appear at the top of the page. For a PWA, I think this behaviour makes the app feel less native, and also, breaks my design (The button at bottom center and the whole map container are not visible unless the user close manually the address bar).
I tried some things I've seen in other questions:
window.scrollTo(0, 1);
<meta name="mobile-web-app-capable" content="yes">
- from here.
I don't care if the app does not hide the address bar when visited in a web browser. But at least I want the address bar hidden when the app is launched as a "native" app (added to home screen).
I also tried changing display
property in the manifest.json
from standalone
to fullscreen
with no luck.
I know I could change the css for my button and map in order to make them "visible" when the address bar is visible, but as I said, this makes feel the app less native IMO.
Is there a solution for hidding permanently the address bar? Is it possible or it is something I have to consider in my design?
解决方案
当您尝试在scope
. 例如,如果您在 manifest.json 文件中设置了范围,scope: "/my-pwa/"
那么所有页面 url 都应该有这样的前缀:/my-pwa/page.html
.
推荐阅读
- react-native - 如何在原生反应中将边距应用于 SVG 图像?
- c# - 如何在 ML.NET 中将 ONNX 中的数据作为 float32[N,60,1] 插入
- python - 如何在任何条件下返回多索引中的所有索引
- android - Flutter:函数运行后获取变量
- sql - 在 Oracle SQL 中根据分组滚动总和条件选择行
- python - 值错误
- command-line - 在 Jupyter Notebook / 另一个程序运行时将命令传递给 Miniconda 提示符
- excel - Selenium (Excel) - 抓取用户点击的 iFrame
- arrays - 如何根据字典的值构建列表?
- python - Jupyter Notebook 和 pip 指的是以前卸载的 python 版本