2017-08-07 96 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'另外,请尝试使用我上面链接的文档