摘要:然后使用狀態(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ì)樣式和交互類似本機(jī)應(yīng)用程序,例如,它的縮放比例適合iOS上的整個(gè)屏幕。當(dāng)用戶將其添加到主屏幕時(shí),您可以通過(guò)使其看起來(lái)像本機(jī)應(yīng)用程序一樣,在iOS上為您的Web應(yīng)用程序定制Safari。您可以使用其他平臺(tái)忽略的iOS設(shè)置來(lái)執(zhí)行此操作。
例如,您可以為添加到iOS主屏幕時(shí)用于表示W(wǎng)eb應(yīng)用程序的圖標(biāo)指定圖標(biāo),如指定Web Clip的網(wǎng)頁(yè)圖標(biāo)所述。當(dāng)您的Web應(yīng)用程序從主屏幕啟動(dòng)時(shí),您還可以最小化iOS用戶界面上的Safari,如更改狀態(tài)欄外觀和隱藏Safari用戶界面組件(搜索欄及工具欄)。這些都是可選設(shè)置,添加到您的網(wǎng)頁(yè)內(nèi)容時(shí)會(huì)被其他平臺(tái)忽略。
閱讀Web應(yīng)用程序的“視口設(shè)置”,了解如何在iOS上設(shè)置Web應(yīng)用程序的視口。
指定Web應(yīng)用程序的網(wǎng)頁(yè)圖標(biāo)您可能希望用戶能夠?qū)⒛腤eb應(yīng)用程序或網(wǎng)頁(yè)鏈接添加到ios設(shè)備主屏幕。這些由圖標(biāo)表示的鏈接稱為Web剪輯。遵循這些簡(jiǎn)單的步驟來(lái)指定一個(gè)圖標(biāo)來(lái)表示您的iOS應(yīng)用程序或網(wǎng)頁(yè)。
要為整個(gè)網(wǎng)站(網(wǎng)站上的每個(gè)頁(yè)面)指定一個(gè)圖標(biāo),請(qǐng)將一個(gè)圖標(biāo)文件以PNG格式放置在名為root的文檔文件夾 apple-touch-icon.png
要為單個(gè)網(wǎng)頁(yè)指定一個(gè)圖標(biāo)或者將網(wǎng)站圖標(biāo)替換為網(wǎng)頁(yè)特定的圖標(biāo),請(qǐng)向該網(wǎng)頁(yè)添加一個(gè)鏈接元素,如下所示:
在上面的例子中,custom_icon.png用你的圖標(biāo)文件名替換。
要為不同的設(shè)備分辨率指定多個(gè)圖標(biāo)(例如,同時(shí)支持iPhone和iPad設(shè)備),請(qǐng)sizes按以下方式為每個(gè)鏈接元素添加一個(gè)屬性:
使用最適合設(shè)備的圖標(biāo)。有關(guān)當(dāng)前圖標(biāo)大小和建議,請(qǐng)參閱iOS人機(jī)界面指南的“圖形”一章。
如果沒(méi)有與設(shè)備的建議尺寸相匹配的圖標(biāo),則會(huì)使用大于推薦尺寸的最小圖標(biāo)。如果沒(méi)有大于推薦尺寸的圖標(biāo),則使用最大的圖標(biāo)。
如果沒(méi)有使用鏈接元素指定圖標(biāo),則會(huì)在網(wǎng)站根目錄中搜索帶有apple-touch-icon...前綴的圖標(biāo)。例如,如果設(shè)備的適當(dāng)圖標(biāo)大小為58 x 58,系統(tǒng)將按以下順序搜索文件名:
apple-touch-icon-80x80.png
apple-touch-icon.png
注意: iOS 7上的Safari不會(huì)為圖標(biāo)添加效果。老版本的Safari不會(huì)為使用-precomposed.png后綴命名的圖標(biāo)文件添加效果。有關(guān)詳細(xì)信息,請(qǐng)參閱第一步:在iTunes Connect中識(shí)別您的應(yīng)用程序。
指定啟動(dòng)屏幕圖像
在iOS上,與原生應(yīng)用程序類似,您可以指定在Web應(yīng)用程序啟動(dòng)時(shí)顯示的啟動(dòng)屏幕圖像。當(dāng)您的Web應(yīng)用程序處于脫機(jī)狀態(tài)時(shí),這非常有用。默認(rèn)情況下,使用上次啟動(dòng)時(shí)的Web應(yīng)用程序屏幕截圖。要設(shè)置另一個(gè)啟動(dòng)圖像,請(qǐng)?jiān)诰W(wǎng)頁(yè)中添加一個(gè)鏈接元素,如下所示:
在上面的例子中,launch.png用你的啟動(dòng)屏幕文件名替換。有關(guān)當(dāng)前的啟動(dòng)屏幕大小和建議,請(qǐng)參閱iOS人機(jī)界面指南的“圖形”一章。
添加啟動(dòng)圖標(biāo)標(biāo)題在iOS上,您可以為啟動(dòng)圖標(biāo)指定一個(gè)Web應(yīng)用程序標(biāo)題。默認(rèn)情況下,使用
在上面的例子中,替換AppTitle你的標(biāo)題。
隱藏Safari用戶界面組件在iOS上,作為優(yōu)化您的Web應(yīng)用程序的一部分,讓它使用獨(dú)立模式更像本地應(yīng)用程序。當(dāng)您使用此獨(dú)立模式時(shí),Safari不會(huì)用于顯示W(wǎng)eb內(nèi)容 - 具體來(lái)說(shuō),屏幕頂部沒(méi)有瀏覽器URL文本字段,或者屏幕底部沒(méi)有按鈕欄。只有一個(gè)狀態(tài)欄出現(xiàn)在屏幕的頂部。閱讀更改狀態(tài)欄外觀以了解如何最小化狀態(tài)欄。
將apple-mobile-web-app-capable元標(biāo)記設(shè)置yes為打開(kāi)獨(dú)立模式。例如,以下HTML將使用獨(dú)立模式顯示W(wǎng)eb內(nèi)容。
您可以使用window.navigator.standalone只讀布爾JavaScript屬性確定網(wǎng)頁(yè)是否以獨(dú)立模式顯示。有關(guān)獨(dú)立模式的更多信息,請(qǐng)參閱apple-mobile-web-app-capable。
更改狀態(tài)欄的外觀如果您的Web應(yīng)用程序以獨(dú)立模式顯示,如本機(jī)應(yīng)用程序,則可以最小化iOS上屏幕頂部顯示的狀態(tài)欄。這樣做使用狀態(tài)欄式元標(biāo)記。
除非您首先指定了隱藏Safari用戶界面組件中所述的獨(dú)立模式,否則此元標(biāo)記將不起作用。然后使用狀態(tài)欄樣式meta標(biāo)簽apple-mobile-web-app-status-bar-style來(lái)根據(jù)您的應(yīng)用程序需要更改狀態(tài)欄的外觀。例如,如果要使用整個(gè)屏幕,請(qǐng)將狀態(tài)欄樣式設(shè)置為半透明黑色。
例如,下面的HTML將狀態(tài)欄的背景顏色設(shè)置為黑色:
有關(guān)狀態(tài)欄外觀的更多信息,請(qǐng)參閱iOS人機(jī)界面指南的“UI欄”一章。
鏈接到其他原生應(yīng)用程序您的Web應(yīng)用程序可以通過(guò)創(chuàng)建具有特殊URL的鏈接來(lái)鏈接到其他內(nèi)置的iOS應(yīng)用程序??捎玫墓δ馨〒艽螂娫捥?hào)碼,發(fā)送短信或iMessage,并在其本機(jī)應(yīng)用程序(如果已安裝)中打開(kāi)YouTube視頻。例如,要鏈接到電話號(hào)碼,請(qǐng)按以下格式構(gòu)造一個(gè)錨點(diǎn)元素:
給我打電話
有關(guān)這些功能的完整視圖,請(qǐng)參閱Apple URL Scheme Reference。
這是我在項(xiàng)目index.html上添加的代碼:
實(shí)際體驗(yàn)如下圖所示:
可以看到用戶添加到主屏幕后,有了自定義的圖標(biāo)及啟動(dòng)圖,打開(kāi)webapp后也不會(huì)有safari的地址欄和工具欄,體驗(yàn)跟原生一樣。
因?yàn)槲沂褂胕phone自帶的屏幕錄制功能,所以頂部狀態(tài)欄背景被占用,實(shí)際體驗(yàn)啟動(dòng)圖是全屏的。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/51754.html
摘要:,不過(guò)在上會(huì)導(dǎo)致?tīng)顟B(tài)欄不顯示任何東西。下面是項(xiàng)目中的相關(guān)設(shè)置圖書(shū)搜索中的處理方式與類似,中也有自己的標(biāo)簽來(lái)指示相應(yīng)的資源。 《PWA學(xué)習(xí)與實(shí)踐》系列文章已整理至gitbook - PWA學(xué)習(xí)手冊(cè),文字內(nèi)容已同步至learning-pwa-ebook。轉(zhuǎn)載請(qǐng)注明作者與出處。 本文是《PWA學(xué)習(xí)與實(shí)踐》系列的第二篇文章。文中的代碼都可以在learning-pwa的manifest分支上找到...
摘要:圖離線情況下發(fā)送微信消息,等網(wǎng)絡(luò)正常后微信會(huì)繼續(xù)處理我們的消息。無(wú)論是在微信中還是手機(jī)短信,在沒(méi)有信號(hào)時(shí)都不影響我們編輯發(fā)送短信,等網(wǎng)絡(luò)恢復(fù)時(shí)會(huì)自動(dòng)幫我們把之前編輯好的信息順利遞送出去。 (刪掉了第一小段,因?yàn)楹蛢?nèi)容關(guān)系不大。。) 本來(lái)這該是個(gè)技術(shù)分享會(huì)的內(nèi)容,參加完 Google Developer Day(GDD) 后想做個(gè) AI Demo 來(lái)分享,奈何技術(shù)實(shí)力不夠,害怕把大家?guī)нM(jìn)...
閱讀 1396·2023-04-25 18:34
閱讀 3459·2021-11-19 09:40
閱讀 2836·2021-11-17 09:33
閱讀 2950·2021-11-12 10:36
閱讀 2837·2021-09-26 09:55
閱讀 2663·2021-08-05 10:03
閱讀 2527·2019-08-30 15:54
閱讀 2873·2019-08-30 15:54