Question

我们在www.tekiki.com有一个HTML5应用。在启动画面和iPhone 4s上的第一页之间出现白页，我们不知道如何删除它。白页仅显示在iPhone上，而不是桌面上。

我们尝试将元素的背景设置为不同的颜色，并没有什么区别。我们考虑以编程方式显示启动画面而不是依赖元标记，但我们更喜欢元标记方法，因为它会自动为iPhone 5等较高设备显示不同的启动画面。

有人可以帮忙吗？

在理想情况下，白页会将此颜色-webkit-linear-gradient(top,#e8e4dc,#f2f0eb)作为背景。

谢谢！

Answer 1

通过“仅在iPhone上显示”，是指在将网站保存到主屏幕之后或仅在移动Safari中保存到主屏幕之前显示白页？

如果您的意思是后者，则只有在将网站添加到主屏幕后才会显示启动图像。因此，白色屏幕只是在页面渲染时的过渡期。 coliff提出的建议肯定有助于缓解这一点;另见下面的更新。

如果您的意思是前者，我只是将该网站添加到我的iPhone 4S的主屏幕上，并且白页没有任何问题;）也就是说，有一个非常简短的闪存从启动图像转换到第一页时的白色。如果你希望在启动图像和第一页之间有一个更平滑的过渡，那么coliff提出的建议也会有所帮助 - 它应该是iOS 7上的平滑淡出和iOS 6上的硬转换。

<强>更新

另外，尝试制作类似以下的测试页。一旦将其保存到主屏幕，您就不应该在启动图像后看到白页或闪光（我提到过）。这表明问题肯定与渲染时间有关，如果不是完全由它引起的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tekiki</title>

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <!-- iPhone 4 Retina -->
    <link rel='apple-touch-startup-image' media='(device-width: 320px) and (-webkit-device-pixel-ratio: 2)' href='/images/dandy/apple-touch-startup-image-640x920.png'>
</head>
<body>
    <h1>PAGE LOADED!</h1>
</body>
</html>

所以，还有一些优化网页应用主页的建议：

在主页上缩小内嵌 CSS和JavaScript，其中<em>很多 - 而不仅仅是外部文件！你甚至可以将HTML缩小。仅凭这一点的节省可能超过其他一切。
根据PageSpeed for Chrome，主页上的图像实际上可以减少63.4KB（减少26％，这似乎比之前提到的19％更好）; PageSpeed甚至可以为您生成优化的图像。
根据this site，您没有使用gzip压缩资源，可以节省高达21.93KB（74.42％）。

Answer 2

您必须将webview的所有子视图和webview本身设置为非透明且背景颜色清晰。

for (UIView *subview in [myWebView subviews]) {
    [subview setOpaque:NO];
    [subview setBackgroundColor:[UIColor clearColor]];
}
[myWebView setBackgroundColor:[UIColor clearColor]];
[myWebView setOpaque:NO];

然后你的html代码应该有这个

<body style="background-color: transparent;">

要完成，请根据需要设置webview的超级视图的背景。

Answer 3

我已经审核了您的网站，并提出了一些提高性能的建议，这肯定会减少在iPhone上呈现网页的延迟。

优化所有图片（如果您在PC上，请使用PNGGauntlet）。这将使主页上的图像大小减少76 KB（减少19％）。优化图像是无损的，因此图像看起来相同但加载速度更快
考虑将JavaScript移至页面底部。这是目前呈现页面的一大瓶颈。
缩小您的JavaScript文件 - 可节省36 KB（减少28％）
缩小CSS以节省3 KB（减少24％）
为您的图片，CSS和JS设置一个到期日以启用缓存，以便在第二次加载时更快
没什么大不了的，但要更新使用jQuery 1.10.2（而不是1.10.1）

更新：我看到有JS检测到iPhone并重定向到http://www.tekiki.com/dandy/dandy/。上面提出的建议仍然存在，但有一件事我注意到 - 你使用的闪屏非常大。 iPhone 5一个是223 KB，不会加载速度快。尝试导出为JPEG或256色PNG以减小大小。压缩并缩小您可以优化性能的一切。

Answer 4

据我所知，你有WebView在AppStart上加载HTML。这似乎需要一些时间，你会在Splash Screen之后看到空WebView一段时间。这是白色背景。

要解决这个问题，你可以做一些事情

在WebView加载内容时显示一些加载屏幕，并在网页完全加载后隐藏它。
此时您也可以隐藏WebView，但在这种情况下，您需要在加载时自己启动Splash屏幕。

希望这会有所帮助。

如何删除iOS上HTML5 Web应用程序中闪屏和第一页之间出现的白页

4 个答案: