Question

我已经构建了一个iPhone网络应用程序并完成了所有步骤，使其看起来像本机应用程序：应用程序图标，防止滚动，阻止选择，使用基于触摸的js方法等。但是，我有飞溅的屏幕很艰难。

我尝试过使用清单文件缓存的320x460 PNG和JPEG。启动图像确实出现，但仅在应用程序启动白屏后几秒钟后出现。因此，在应用程序完成启动之前，启动画面实际上只显示了几分之一秒。

我无法弄清楚为什么它没有立即加载。我知道它是由清单缓存的，因为它加载没有互联网连接。我之前读过，直到DOM准备好才会显示启动，所以我猜这是问题，但我不知道如何修复它。

Answer 1

您是否使用启动链接插入？

<link rel="apple-touch-startup-image" href="startup-graphic.png" />

我还发现，有时当我对iPhone网络应用程序进行更改时，我必须完全删除主屏幕上的链接，并在某些元素正确更新之前再次添加它 - 即使在更新之后缓存清单。

Answer 2

如果您正在使用Sencha Touch，我发现问题与此相关。为了尝试计算屏幕尺寸，他们增加了2个500毫秒的延迟。这为加载时间增加了额外的时间。

我已经设法将iPhone上的时间减少到50毫秒。我不确定代码功能如何，但它对我有用。

if (Ext.is.iOS && Ext.is.Phone) {
    Ext.Viewport.init = function(fn, scope) {
        var me = this,
            stretchSize = Math.max(window.innerHeight, window.innerWidth) * 2,
            body = Ext.getBody();

        me.updateOrientation();

        this.initialHeight = window.innerHeight;
        this.initialOrientation = this.orientation;

        body.setHeight(stretchSize);

        Ext.defer(function() {
            me.scrollToTop();
            if (fn) {
                fn.apply(scope || window);
            }
            me.updateBodySize();
        }, 50);
    };
}

代码首先检查我们是否在iPhone上。这样我只改变了iPhone的功能。我无权访问任何其他设备进行测试。

我确实认为即便如此也可以做得更好。例如，在iPhone上的独立模式下，我们确切知道屏幕有多高。

现在就行了。

希望这有帮助。

Answer 3

这将为您的Web App添加启动画面。以下是iPad和iPhone / iPod Touch所需的尺寸，包括状态栏区域。

iPad横向 - 1024 x 748

<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />

iPad Portrait - 768 x 1004

<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

iPhone / iPod Touch Portrait - 320 x 480（标准分辨率）

<link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png" />

iPhone / iPod Touch Portrait - 640 x 960像素（Retina Display高分辨率）

<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />

如果要创建适用于iPad的Web应用程序，建议使用横向和纵向尺寸。

编辑：此外，您需要清除缓存并重命名文件（例如，从image.png到new_image.png），以便设备加载新的[正确]图像。它不会在您第一次启动Web应用程序时显示启动画面，甚至可能不会显示第二次，具体取决于您是否有足够的时间将所有必需的文件加载到设备的内存中。

iPhone Web App启动画面延迟

3 个答案: