資訊專欄INFORMATION COLUMN
摘要：如何判斷應(yīng)用是否從桌面圖標(biāo)啟動這就要說到應(yīng)用添加到桌面后的顯示模式了，一共有這么多種，通過來控制。該應(yīng)用程序?qū)⒖雌饋硐褚粋€獨立的應(yīng)用程序，但會有瀏覽器地址欄。這是默認(rèn)的設(shè)置。
如何判斷web應(yīng)用是否從桌面圖標(biāo)啟動
這就要說到web應(yīng)用添加到桌面后的顯示模式了，一共有這么多種，通過mainfest來控制。只要知道啟動模式是什么，就能判斷出是否從桌面啟動。
fullscreen: 全屏顯示, 所有可用的顯示區(qū)域都被使用, 并且不顯示狀態(tài)欄chrome
standalone: 讓這個應(yīng)用看起來像一個獨立的應(yīng)用程序，包括具有不同的窗口，在應(yīng)用程序啟動器中擁有自己的圖標(biāo)等。這個模式中，用戶代理將移除用于控制導(dǎo)航的UI元素，但是可以包括其他UI元素，例如狀態(tài)欄。
minimal-ui: 該應(yīng)用程序?qū)⒖雌饋硐褚粋€獨立的應(yīng)用程序，但會有瀏覽器地址欄。 樣式因瀏覽器而異。
browser: 這是默認(rèn)的設(shè)置。該應(yīng)用程序在傳統(tǒng)的瀏覽器標(biāo)簽或新窗口中打開，具體實現(xiàn)取決于瀏覽器和平臺。
通過桌面圖標(biāo)啟動后，navigator.standalone會等于true，只要判斷這個變量就夠了。
安卓桌面圖標(biāo)啟動通過桌面圖標(biāo)啟動后，CSS的媒體查詢是能夠探測到的，換而用js寫，下面的結(jié)果為True。
window.matchMedia("(display-mode: standalone)").matches
總結(jié)
這里有我實現(xiàn)好的方法，也有npm包，引入后可直接用。非常小，非常簡單
https://github.com/GeoffZhu/i...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109500.html
摘要：然后使用狀態(tài)欄樣式標(biāo)簽來根據(jù)您的應(yīng)用程序需要更改狀態(tài)欄的外觀。這是我在項目上添加的代碼實際體驗如下圖所示可以看到用戶添加到主屏幕后，有了自定義的圖標(biāo)及啟動圖，打開后也不會有的地址欄和工具欄，體驗跟原生一樣。 現(xiàn)在很多開發(fā)者的Web應(yīng)用程序的設(shè)計樣式和交互類似本機(jī)應(yīng)用程序，例如，它的縮放比例適合iOS上的整個屏幕。當(dāng)用戶將其添加到主屏幕時，您可以通過使其看起來像本機(jī)應(yīng)用程序一樣，在iOS...
摘要：列表好的使用，能更好地提高頁面的可用性及被檢索的幾率。假設(shè)頁面使用了標(biāo)準(zhǔn)的，那么此定義效果等同假設(shè)頁面并沒有使用標(biāo)準(zhǔn)的，那么將使用來渲染。需要注意的是并不是所有搜索引擎都支持，比較保守的做法是配合使用。 前言 在移動前端第一彈：viewport詳解中，我們講了viewport，那是一個關(guān)于meta的故事。這次我們會就將meta這個故事講得更廣闊、更有意思一些。 寫過HTML的童鞋，應(yīng)該...
摘要：漸進(jìn)式應(yīng)用的安裝過程很快，只需要在主屏幕上添加一個圖標(biāo)即可。漸進(jìn)式應(yīng)用啟動時可以顯示一個好看的啟動畫面。而在微信這邊，憑借龐大的用戶基數(shù)和體量能否與分庭抗禮乃至笑到最后目前還不得而知。 最近關(guān)于漸進(jìn)式Web應(yīng)用有好多討論，有一些人還在質(zhì)疑漸進(jìn)式Web應(yīng)用是否就是移動端未來。 但在這篇文章中我并不會將漸進(jìn)式APP和原生的APP進(jìn)行比較，但有一點是可以肯定的，這兩種APP的目標(biāo)都是使用戶體...
閱讀 2018·2021-11-24 09:39
閱讀 1006·2021-11-11 16:55
閱讀 1473·2021-10-09 09:43
閱讀 1452·2021-10-08 10:17
閱讀 1688·2021-08-25 09:41
閱讀 458·2019-08-30 13:02
閱讀 657·2019-08-29 15:14
閱讀 1035·2019-08-29 13:53
