Question

我对javascript很陌生，最近创建了一个网站作为练习。我一直试图让该网站在移动浏览器中显示为全屏Web应用程序，但似乎没有任何效果。我基本上去过我能找到的所有相关网站和资源，但仍然一无所获。我开始认为这可能是我忽略的其他地方的一些愚蠢的小错误。感谢经验丰富的各方的任何帮助<3

供参考的网站：is

我尝试过的事情：

1）<meta name="apple-mobile-web-app-capable" content="yes">

结果：似乎没有对移动网络应用程序产生任何明显的影响，并且当我添加到主屏幕并尝试从那里打开时，结果相同。

2）创建一个完整的manifest.json文件，并将其链接到我的index.html。 Chrome开发人员工具无法检测到我的清单文件，但pwabuilder.com可以。

我还尝试了更改源代码中的/（链接index.html中的manifest.json），还尝试了将上面的两个尝试同时进行和单独进行。我读到这可能是缓存问题，因此我还尝试了多次清除缓存，重新安装chrome，以及许多其他徒劳的尝试。

这是我的index.html的相关部分

<meta name="viewport" content = "width = device-width, initial-scale = 0.7,  user-scalable = no">
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="styles.css">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

当我出于某种原因尝试使用pwa方法（使用manifest.json）时，chrome无法检测到我的清单文件。我已经进行了故障排除，并且我的代码和链接与几个教程和参考文献相同，但是仍然无法检测到。我仍然在iPhone上尝试过该功能，但仍可以从主屏幕打开野生动物园。

也尝试了苹果meta标签方法，但是那行代码从字面上看也没有明显的区别。

Answer 1

我相信您的特定网站存在的问题是清单中没有清单。下面是一些示例代码，显示清单链接的正确位置。

如果要在Android版Chrome浏览器上添加“添加到主屏幕”按钮（必须具有short_name或名称，必须包含192px和512px大小的图标），还请确保清单中包含被认为可以安装的最少元素。，start_url，显示必须是以下之一：全屏，独立或最小用户界面）。您可以在Google PWA Developers网站上找到更多信息。

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="manifest" href="/manifest.json"><!-- Note manifest is in the header -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Content Here</h1>
</body>
</html>

Answer 2

在Chrome DevTools上，您可以在“应用程序”菜单项上检查manifest.json，其中有一个“应用程序/清单”部分。

Answer 3

解决了！问题似乎是我的事情太多了。我只是将一堆HTML移到了body部分，而chrome开发工具检测到了清单。

我的网站无法在移动浏览器中全屏运行（保存到主屏幕时）

3 个答案: