2017-08-07 65 views
0

這個網站https://growthhackers.com/growth-studies我使用chrome從我的android手機上打開了它,然後我選擇了「添加到主屏幕」來快速回到它。我注意到了一些事情,圖標像移動應用程序一樣打開,而不是在Chrome窗口中打開。當我按下內部鏈接時,增長黑客的標誌就像移動應用一樣成爲加載的標誌。那究竟是什麼?這項技術的名稱是什麼開始搜索?

PS。請原諒我有限的編程知識。我只是想知道是什麼的只是爲了搜索和了解吧:)

+0

您的智能手機或平板電腦的主屏幕不僅適用於應用程序。無論您使用哪種平臺,您都可以將您喜愛的網站固定到主屏幕,以便快速訪問它們。 – Ofisora

+0

https://stackoverflow.com/tags/progressive-web-apps –

回答

0

簡而言之,網站鏈接問題加載網頁的移動版本的名稱。因此,您似乎打開了一個移動應用程序。我認爲,在建立一個網站時,你可以通過編碼的動態分辨率來製作一個相同的移動版本,因此它將界面與移動設備屏幕對齊。

如果你不知何故最終建立一個網站,並希望實現相同,您可以參考:

  1. How do make my website resize automatically when the screen resolution changes?

  2. Adjusting your websites to fit all types of resolution using HTML and CSS

  3. Responsive Web Layouts for Mobile Screens: Intro, Tips and Examples

而且加載動畫和全部也可以實現。

0

o_O'sanswer基本上描述瞭如何創建一個網站的移動版本超過你在我的意見中描述的功能,所以這可能更多的是你以後。

這不一定是來自內存的谷歌瀏覽器功能,儘管對於該功能的谷歌瀏覽器文檔,請查看附加規格的鏈接。

這是關於在您的HTML頭部包含META標籤或兩個。 我相信你特別需要這些元標籤:

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 

,另外,您可以通過更改主題色meta標籤和內容屬性更改Chrome中的導航欄的顏色。

<!-- WebKit/Chrome/Blink browsers? --> 
<meta name="theme-color" content="#CAAF6A"> 
<!-- Windows Phone --> 
<meta name="msapplication-navbutton-color" content="#CAAF6A"> 
<!-- iOS Safari --> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 

我讀過一些的規格從谷歌這個功能,但它似乎是最明確的一個似乎是這一個: https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

TL;博士 谷歌的網頁App Manifest'另外,請嘗試使用我上面鏈接的文檔