如何判斷web應用是否添加到主屏幕

willin 發布于2019-08-26 13:46 / 1810人閱讀

摘要：如何判斷應用是否從桌面圖標啟動這就要說到應用添加到桌面后的顯示模式了，一共有這么多種，通過來控制。該應用程序將看起來像一個獨立的應用程序，但會有瀏覽器地址欄。這是默認的設置。

如何判斷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應用防火墻如何解決

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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