Question

我已经为测试场景构建了以下内容：http://dev.driz.co.uk/Spinner/用于在iPhone Chromeless上运行的webapp。如果你在iPhone上打开并将其添加到主屏幕，你会看到它是一个全屏的网络应用程序，配有启动屏幕和预加载器。

我已经创建了启动屏幕和第一个屏幕，用户将看到相同的Apple documentation引用：“通常，设计一个与之相同的启动图像应用程序的第一个屏幕。避免在应用程序完成启动时包含可能看起来不同的元素，这样用户就不会在启动图像和第一个应用程序屏幕之间遇到闪光。“

如上所述，我已经使它们相同，以防止启动和应用程序本身之间可能发生的闪存（通常是由于不同的UI组件，我的启动时不会更改）。 然而我仍然得到这个闪光灯！这就好像应用程序显示启动然后隐藏然后显示网站，其中包括再次显示启动图像的启动画面。

关于如何打击这个的任何想法？我甚至尝试将html / body本身设置为具有启动屏幕的背景图像，但它们在加载时仍然是闪光灯。还尝试使用实际图像而不是背景，但同样问题。

Answer 1

确定。快速回答：不要使用ios启动图像imo，因为它只显示非常不可思议的ios，你无论如何也无法使用它。我不知道我试图获得一个像样的图像多长时间，一旦你谈论不同的设备和格式，你只需要提供所有图像就会讨厌。

我已经完成了一个css / javascript启动画面，我将其用于我自己的应用程序（例如here）。您可以指定根据设备加载的纵向和横向图像（4种尺寸）。

背景附加到splash类，我正在设置正文并在应用加载后删除。

我已将代码放在Github上的repo内。随意使用。如果您有任何疑问，请告诉我。

Answer 2

我知道为本机应用程序添加加载图像是正确的，但是在您链接的文档中没有位置表示对于Web应用程序也是如此。

Answer 3

我打赌你看到的闪光灯是窗口的背景或你的webview。它很可能是白色的，当应用程序加载时，它不会立即呈现页面，因此一瞬间你会看到窗口的白色背景。

我会尝试在您的app委托或Interface Builder中编辑_window.backgroundColor（我猜这个属性名称），如果不能修复它，看看是否可以编辑webview的背景颜色。所有这些都可能取决于您用于创建Web应用程序的任何工具链（即phonegap）

Answer 4

您找到解决方案了吗？我发现问题是iPhone的根本问题，无论您使用哪种应用。

例如：显示一个背景为#ccc的网站，其iPhone 7的启动屏幕为#ccc。

<!doctype html>
<html style="background-color: #ccc;">
<head>
  <title>iOS web app</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="iOS web app">
  <meta name="viewport" content="initial-scale=1">
  <link href="https://placehold.it/750x1294" media="(device-width: 375px) and (device-height: 667px)
                 and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body style="background-color: #ccc;">
  <h1>iOS web app</h1>
</body>
</html>

https://imgur.com/a/tGiREVM

在加载应用程序时，您会看到闪烁。

快速加载应用随着闪烁而变得更糟，稍微有些癫痫病。而且，如果启动画面较暗，则看起来又变糟了。

在iOS webapp上启动屏幕和预加载器之间获取闪存

4 个答案: