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

【问题标题】：Can't get my website to run full screen in mobile browsers (when saved to home screen)无法让我的网站在移动浏览器中全屏运行（保存到主屏幕时）
【发布时间】：2019-04-22 05:32:37
【问题描述】：

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

参考网址：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 上尝试过，但它仍然从我的主屏幕打开 safari。

也尝试了苹果元标记方法，但那行代码实际上也没有明显的区别。

【问题讨论】：

我认为您将需要初始比例 1，0.7 似乎很奇怪..

标签： javascript web-applications fullscreen progressive-web-apps

【解决方案1】：

我认为您的特定网站的问题在于清单不在标题中。下面是一些示例代码，显示了清单链接的正确位置。

如果您想在 Android 版 Chrome 上添加“添加到主屏幕”按钮（必须包含短名称或名称，必须包含 192 像素和 512 像素大小的图标），还请确保您的清单包含被视为符合安装条件的最少元素, start_url, display 必须是以下之一：全屏、独立或最小用户界面）。您可以在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>

【讨论】：

它在标题中：（我认为您应该能够在源代码下的网站 changeit.netlify.com 上看到我的完整代码。chrome 仍然没有检测到我的清单文件。好郁闷哈哈
如果我记得，我上次查看它时（现在在移动设备上）head 标签在 body 标签中，这是不正确的，它们每个都应该是 html 标签的子标签。该网站现在出现故障，所以我无法确认...

【解决方案2】：

在 Chrome DevTools 上，您可以在 Application 菜单项中查看 manifest.json，有一个 Application / Manifest 部分。

【讨论】：

是的，我知道这一点。我在帖子中提到 chrome 开发工具没有检测到我的清单文件。
@tmlyw 抱歉没有意识到

【解决方案3】：

解决了！问题似乎是我的 .我只是将一堆 HTML 转移到正文部分，并且清单被 chrome 开发工具检测到。

【讨论】：