Question

这个网站https://growthhackers.com/growth-studies我用我的Android手机使用chrome打开它，然后我选择“添加到主屏幕”以快速回到它。我发现了一些东西，图标就像移动应用程序一样打开，而不是在Chrome窗口中打开。当我按下里面的链接时，增长黑客的标志就像移动应用程序一样加载动画。那究竟是什么呢？

PS。请原谅我有限的编程知识。我只想知道这个名称是什么，只是为了搜索并了解更多信息：）

Answer 1

简单地说，有问题的网络链接正在加载移动版网站。因此，您似乎正在打开一个移动应用程序。我认为，在构建网站时，您可以通过使编码成为动态分辨率来制作相同的移动版本，因此它将其界面与移动设备屏幕对齐。

如果您以某种方式建立了一个网站，并希望实现相同的目标，您可以参考：

How do make my website resize automatically when the screen resolution changes?
Adjusting your websites to fit all types of resolution using HTML and CSS
Responsive Web Layouts for Mobile Screens: Intro, Tips and Examples

此外，加载动画和所有内容也可以实现。

Answer 2

o_O's answer基本上描述了如何创建网站的移动版本，而不是我认为您所描述的功能，所以这可能更多是您所追求的。

这不一定是内存中的Google Chrome功能，但有关该功能的Google Chrome文档，请参阅附带规格的链接。

所有关于在HTML头部分中包含一两个META标记。我相信你需要这些元标记：

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

此外，您还可以通过更改主题颜色元标记和内容属性来更改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">

我已经阅读了Google关于此功能的一些规范，但看起来最清晰的规格似乎就是这个： https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

TL;博士 Google＆＃39; Web App Manifest＆＃39;另外，尝试使用我上面链接的文档

这项技术的名称是什么开始搜索？

2 个答案: