6

私は iPhone Web アプリを作成し、それをネイティブ アプリのように見せるためのすべての手順を実行しました: アプリ アイコン、スクロールの防止、選択の防止、タッチベースの js メソッドの使用など。スプラッシュスクリーン付き。

マニフェスト ファイルでキャッシュされた 320x460 の PNG と JPEG を試しました。スプラッシュ画像は表示されますが、アプリが白い画面で起動してから数秒後にのみ表示されます. つまり、スプラッシュ スクリーンは、アプリの起動が完了するまでのほんの一瞬だけ表示されます。

スプラッシュをすぐにロードしない理由がわかりません。インターネットに接続せずに読み込まれるため、マニフェストによってキャッシュされることはわかっています。DOMの準備が整うまでスプラッシュが表示されないことを前に読んだので、それが問題だと推測していますが、修正方法がわかりません。

4

3 に答える 3

4

起動リンクで挿入していますか？

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

また、iPhone Web アプリに変更を加えたとき、キャッシュ マニフェストを更新した後でも、一部の要素が適切に更新される前に、ホーム画面のリンクを完全に削除し、リンクを再度追加するプロセスを実行する必要があることもありました。 .

于 2010-10-25T13:19:19.050 に答える
2

これにより、Webアプリにスプラッシュ画面が追加されます。以下は、iPadとiPhone / iPod Touchの両方に必要なサイズです。これらには、ステータスバー領域も含まれます。

iPadランドスケープ– 1024 x 748

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

iPadポートレート– 768 x 1004

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

iPhone / iPod Touchポートレート– 320 x 480（標準解像度）

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

iPhone / iPod Touchポートレート– 640 x 960ピクセル（Retinaディスプレイ高解像度）

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

iPad互換のWebアプリを作成する場合は、横向きと縦向きの両方のサイズを使用することをお勧めします。

編集：また、デバイスが新しい[正しい]画像をロードするように、キャッシュをクリアしてファイルの名前を変更する必要があります（たとえば、image.pngからnew_image.pngに）。Webアプリを最初に起動したときはスプラッシュ画面が表示されません。また、必要なすべてのファイルをデバイスのメモリにロードするのに十分な時間を与えるかどうかによっては、2回目も表示されない場合があります。

于 2012-03-10T07:00:36.920 に答える
2

Sencha Touch を使用している場合、問題がそれに関連していることがわかりました。画面サイズを試して解決するために、500 ミリ秒の大幅な遅延が 2 つ追加されました。これにより、読み込み時間が 1 秒長くなります。

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 のスタンドアロン モードでは、画面の高さが正確にわかります。

とりあえず間に合います。

お役に立てれば。

于 2011-04-06T12:05:12.733 に答える