4

我们在www.tekiki.com上有一个 HTML5 应用程序。在 iPhone 4s 的初始屏幕和第一页之间会出现一个白页，我们不知道如何删除它。白页只出现在 iPhone 上而不是桌面上。

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

任何人都可以帮忙吗？

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

谢谢！

4

4 回答 4

1

“仅出现在 iPhone 上”是指在网站保存到主屏幕之后出现白页，还是在将其保存到主屏幕之前仅在 Mobile 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，其中有很多——不仅仅是外部文件！您甚至可以缩小 HTML。仅此一项的节省可能超过其他一切。
  • 根据PageSpeed for Chrome的说法，主页上的图像实际上可以减少 63.4KB（减少 26%，这似乎比之前提到的 19% 更好）；PageSpeed 甚至可以为您生成优化的图像。
  • 根据这个站点，您没有使用 gzip 压缩资源，最多可以节省 21.93KB (74.42%)。
于 2013-08-31T04:35:18.260 回答
0

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

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

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

于 2013-08-30T06:32:42.280 回答
0

您必须将 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 的 superview 的背景。

于 2013-08-27T09:55:37.097 回答
0

据我了解，您有在 AppStart 上加载 HTML 的 WebView。这似乎需要一些时间，并且您会在启动画面之后看到空的 WebView 一段时间。这是白色背景。

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

  1. 在 WebView 加载内容时显示一些加载屏幕，并在网页完全加载后将其隐藏。
  2. 您也可以暂时隐藏 WebView，但在这种情况下，您需要在加载时拥有自己的启动画面。

希望这会有所帮助。

于 2013-09-05T08:26:22.493 回答