无法让我的网站在移动浏览器中全屏运行（保存到主屏幕时）
[英]Can't get my website to run full screen in mobile browsers (when saved to home screen)
问题描述
I'm pretty new to javascript, and recently created a website as practice. 
我是javascript的新手，最近创建了一个网站作为练习。 I've been trying to get the website to display as a fullscreen web app in mobile browsers, but nothing seems to be working. 我一直试图让网站在移动浏览器中显示为全屏网络应用程序，但似乎没有任何效果。 I've been to basically every relevant website and resource that I can find but still nothing. 我基本上去过所有可以找到的相关网站和资源，但仍然没有。 I'm starting to think that it's probably some stupid small error somewhere else that I've overlooked. 我开始认为这可能是我忽略的其他地方的一些愚蠢的小错误。 Any help from more experienced parties will be very much appreciated<3 非常感谢来自更有经验的政党的任何帮助<3
Website for reference: is 网站供参考： 是
Things I've tried: 我试过的事情：
1) <meta name="apple-mobile-web-app-capable" content="yes"> 1） <meta name="apple-mobile-web-app-capable" content="yes">
result: didn't seem to make any visible difference to the mobile webapp, and same result when i added to home screen and tried opening from there. 结果：似乎没有对移动webapp产生任何明显的差异，并且当我添加到主屏幕并尝试从那里打开时，结果相同。
2) creating a complete manifest.json file, linking it to my index.html. 2）创建一个完整的manifest.json文件，将其链接到我的index.html。 Chrome dev tools couldn't detect my manifest file, but pwabuilder.com could. Chrome开发工具无法检测到我的清单文件，但pwabuilder.com可以。
I've also tried changing the / in the source (linking manifest.json in the index.html) and also tried both attempts above together and separately. 我也尝试更改源中的/（在index.html中链接manifest.json）并同时尝试上述两个尝试。 I read that it could be a cache issue, so I also tried clearing my cache several times, reinstalling chrome, among many other futile attempts. 我读到它可能是一个缓存问题，所以我也尝试清理我的缓存几次，重新安装chrome，以及许多其他徒劳的尝试。
this is the relevant part of my index.html 这是我的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">
when I try the pwa approach (using a manifest.json) for some reason chrome doesnt detect my manifest file. 当我尝试pwa方法（使用manifest.json）由于某种原因chrome没有检测到我的清单文件。 I've troubleshooted and my code and links are identical to several tutorials and references but it still doesn't detect. 我已经排除故障，我的代码和链接与几个教程和参考相同，但它仍然没有检测到。 I still tried it out on my iphone but it still opens safari from my home screen. 我仍然在我的iPhone上尝试过，但它仍然从我的主屏幕打开safari。
tried the apple meta tag approach as well but that line of code literally doesn't make a visible difference too. 尝试了苹果元标记方法，但这行代码字面上也没有产生明显的差异。
3 个解决方案
解决方案1
0 2019-04-22 23:31:04
I believe the issue with your particular website is that the manifest is not in the header. 我相信您的特定网站的问题是清单不在标题中。 Below is some example code that shows the correct location for the manifest link. 下面是一些示例代码，显示清单链接的正确位置。
Also make sure that your manifest contains the minimum elements to be considered eligible for install if you want to have an add to home screen button on Chrome for Android (must have short_name or name, must include a 192px and a 512px sized icons, start_url, display must be one of: fullscreen, standalone, or minimal-ui). 如果您想在Chrome for Android上添加主屏幕按钮（还必须包含short_name或名称，必须包含192px和512px大小的图标，start_url，请确保您的清单包含被认为有资格安装的最少元素） display必须是以下之一：fullscreen，standalone或minimal-ui）。 You can find more information on the Google PWA Developers website. 您可以在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>
解决方案2
0 2019-04-22 23:40:21
在Chrome DevTools上，您可以在Application菜单项上检查manifest.json，还有一个Application / Manifest部分。
解决方案3
0 2019-04-24 20:22:06
Solved! 解决了！ Problem seemed to be that I had too much going on in my . 问题似乎是我在我身上发生了太多事情。 i just shifted a bunch of HTML into the body section and manifest got detected by chrome dev tools. 我刚刚将一堆HTML转移到了body部分，并且chrome dev工具检测到了manifest。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.