1

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

我已经使用户看到的启动屏幕和第一个屏幕与Apple 文档引用的相同:“通常,设计一个与应用程序的第一个屏幕相同的启动图像。避免包含在启动时可能看起来不同的元素应用程序完成启动,因此用户不会在启动图像和第一个应用程序屏幕之间体验到闪烁。

如上所述,我将它们设置为相同以防止启动和应用程序本身之间可能发生的闪烁(通常是由于不同的 UI 组件,其中我在启动时不会更改)。但是我仍然得到这个闪光!就好像该应用程序正在显示启动,然后隐藏然后显示网站,其中包括再次显示带有启动图像的启动屏幕。

关于如何解决这个问题的任何想法?我什至尝试将 html/body 本身设置为具有启动屏幕的背景图像,但它们在加载时仍然是 Flash。还尝试使用实际图像而不是背景,但同样的问题。

4

4 回答 4

1

我敢打赌你看到的闪光是窗口的背景,或者你的 web 视图。它很可能是白色的,当应用程序加载时,它不会立即呈现页面,因此您会在一瞬间看到窗口的白色背景。

我会尝试在您的应用程序委托或 Interface Builder 中编辑 _window.backgroundColor (我猜是该属性名称),如果这不能解决它,请查看您是否可以编辑 webview 的背景颜色。所有这些都可能取决于您用于创建 webapp 的任何工具链(即 phonegap)

于 2013-03-06T22:03:37.347 回答
1

好的。快速回答:不要使用 ios 启动图像 imo,因为它只是显示非常不真实,并且在 ios 之外您无论如何都无法使用它。我不知道我尝试了多长时间来展示一个像样的图像,一旦你谈论不同的设备和格式,你必须提供的所有图像都令人讨厌。

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

背景附加到splash类,我将其设置在主体上,并在应用程序加载后将其删除。

我已将代码放在 Github 上的一个仓库中。随意使用。如果您有任何问题,请告诉我。

于 2013-03-04T22:12:32.110 回答
0

我确实知道放置加载图像对于本机应用程序是正确的,但是在您链接的文档上没有任何地方说对于网络应用程序也是如此。

于 2013-03-06T16:18:03.607 回答
0

你找到解决办法了吗?我发现问题是 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

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

更快的加载应用程序感觉更糟,有点癫痫,闪烁。如果启动画面很暗,它看起来又更糟了。

于 2020-07-27T18:55:02.560 回答