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