如何判断web应用是否添加到主屏幕

willin 发布于2019-08-26 13:46 / 1765人阅读

摘要：如何判断应用是否从桌面图标启动这就要说到应用添加到桌面后的显示模式了，一共有这么多种，通过来控制。该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏。这是默认的设置。

如何判断web应用是否从桌面图标启动

这就要说到web应用添加到桌面后的显示模式了，一共有这么多种，通过mainfest来控制。只要知道启动模式是什么，就能判断出是否从桌面启动。

fullscreen: 全屏显示, 所有可用的显示区域都被使用, 并且不显示状态栏chrome
standalone: 让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模式中，用户代理将移除用于控制导航的UI元素，但是可以包括其他UI元素，例如状态栏。
minimal-ui: 该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏。样式因浏览器而异。
browser: 这是默认的设置。该应用程序在传统的浏览器标签或新窗口中打开，具体实现取决于浏览器和平台。

IOS桌面图标启动

通过桌面图标启动后，navigator.standalone会等于true，只要判断这个变量就够了。

安卓桌面图标启动

通过桌面图标启动后，CSS的媒体查询是能够探测到的，换而用js写，下面的结果为True。

window.matchMedia("(display-mode: standalone)").matches

总结

这里有我实现好的方法，也有npm包，引入后可直接用。非常小，非常简单
https://github.com/GeoffZhu/i...

GPU云服务器云服务器 js如何判断屏幕高度如何判断是否有cdn加速 web应用防火墙如何 WEB应用防火墙如何解决

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109500.html

Safari配置WebApp----添加启动图和桌面图标让你的WebApp在ios设备上体验如原生一

摘要：然后使用状态栏样式标签来根据您的应用程序需要更改状态栏的外观。这是我在项目上添加的代码实际体验如下图所示可以看到用户添加到主屏幕后，有了自定义的图标及启动图，打开后也不会有的地址栏和工具栏，体验跟原生一样。现在很多开发者的Web应用程序的设计样式和交互类似本机应用程序，例如，它的缩放比例适合iOS上的整个屏幕。当用户将其添加到主屏幕时，您可以通过使其看起来像本机应用程序一样，在iOS...

lindroid 2019-08-01 18:28 评论0 收藏0
善用meta

摘要：列表好的使用，能更好地提高页面的可用性及被检索的几率。假设页面使用了标准的，那么此定义效果等同假设页面并没有使用标准的，那么将使用来渲染。需要注意的是并不是所有搜索引擎都支持，比较保守的做法是配合使用。前言在移动前端第一弹：viewport详解中，我们讲了viewport，那是一个关于meta的故事。这次我们会就将meta这个故事讲得更广阔、更有意思一些。写过HTML的童鞋，应该...

fengxiuping 2019-08-01 15:13 评论0 收藏0
渐进式Web应用（PWA）入门教程（上）

摘要：渐进式应用的安装过程很快，只需要在主屏幕上添加一个图标即可。渐进式应用启动时可以显示一个好看的启动画面。而在微信这边，凭借庞大的用户基数和体量能否与分庭抗礼乃至笑到最后目前还不得而知。最近关于渐进式Web应用有好多讨论，有一些人还在质疑渐进式Web应用是否就是移动端未来。但在这篇文章中我并不会将渐进式APP和原生的APP进行比较，但有一点是可以肯定的，这两种APP的目标都是使用户体...

pingink 2019-08-22 17:31 评论0 收藏0