いくつかのポイントを共有したかった。
メディア
このプロジェクトは、ビデオ/オーディオファイルの再生を許可し、ユーザーの不必要な移動を許可しないことになっています。
iPadのビデオは、何かをクリックすることによってのみ再生できます。 メディアファイルを自動的に再生します。たとえば、ページが読み込まれたとき、動作しないか、または動作しますが、iOSのすべてのバージョンでは動作しません。
そのため、最初にビデオ/オーディオを再生する必要があるのは、クリックするだけです。 さらに、src属性が同じタグに変更され、変更されたイベントをキャッチすると、再生を自動的に実行できます。
プロジェクトのこの部分にはいくつかの問題がありました。
1.ファイルがアップロードされる前に、QuickTimeロゴがビデオタグに表示されていました。
display：noneまたはvisibility：hiddenは機能しませんでした。 -webkit-transformの支援：translateX（-2048px）。
2.ビデオがダウンロードされ、再生の準備が整う前に、音が少しぴくぴくしました。 この問題は、ビデオタグのreadyStateプロパティを確認することで解決しました。
3.何らかの理由で、ユーザーのクリック時に、目的のビデオファイルではなく、オーディオファイルが再生されることがありました。 iOSメディアでは、オブジェクトはシングルトンとして実装されている、つまり ページごとに1つのインスタンスしか存在できません。 一般的に、これはすべて理論であり、私を容易にするものではありませんでした。 src属性を削除または空にしようとしました-効果はありません。 実験を通して、src = ".."が役立ちました（src = "。"はまだ助けませんでした）。 おそらく、もっと美しいものを思いつくことができましたが、 メディアタグを削除することは不可能であり、このグリッチに非常にうんざりしていたため、すべてをそのまま残しました。
そのため、ビデオファイルを再生するには、次の操作を行います。
$(video).css("-webkit-transform", "translateX(-2048px)"); // -
/* , */
video.play();
if(video.readyState !== 4){
setTimeout(function(){
video.pause();
}, 1);
}
/* , */
$(video).bind("canplaythrough", function(){
$(video).css("-webkit-transform", "translateX(0)");
video.play();
});
動画に関する別のポイント-クリックすることはできません。レイヤーを一番上に置いて、そのイベントを追跡する必要があります。
ウィンドウイベント
1. ononline、onoffline-ユーザーに警告を表示し、可能であれば作業を続行するために、インターネットへの接続を追跡する必要がありました。
2. onpageshow-ユーザーがウィンドウを閉じずに、デバイス自体の「ホーム」ボタンをクリックしてから、safariに戻ったときに実行されます。
3. onorientationchange-デバイス自体のポートレートモードとランドスケープモード間の移行時に実行されます。 ここで、window.orientation値をキャッチしてモードを決定できます。
4. onbeforeunload-これは、iPadの標準イベントが機能しないようです。 アプリケーション全体を外部iframeにロードし、onunloadイベントを追跡する必要がありました。
アニメーション
1. -webkit-transitionを使用してcssを実行する方が適切です。 これははるかに高速に動作し、これは特にiPad1にとって非常に重要です。
2. topプロパティとleftプロパティをアニメーション化する代わりに、translate3dを使用します。
3.よくスケールされたスケール。これは、ポートレートモードとランドスケープモードを切り替えるときに便利です。
4.特に要素が-webkit-box-shadowに設定されている場合、アニメーション、不透明度、幅、高さが不十分です。
CSS
ここではすべてが非常に良く、1つのブラウザと多くの便利なプロパティがあります。
1.可能な限り、写真のダウンロードを避ける必要があります。 グラデーション、円、三角形-スタイルですべてを行うことができます。
2.要素を非表示にする最も速い方法は、translate3dまたはtranslateXプロパティを使用することです。
3. -web-kit cssプロパティを調べる必要があり、多くの時間を節約できます。 ここでhttp://css-infos.net/properties/webkitを見ることができます 。
タッチイベント
1. jQuery Mobileを使用しましたが、少し拾わなければなりませんでした。それ以外の場合は、ページに追加のタグを追加しました。 scrollviewプラグインと組み合わせて、強力なスクローラーが取得されます。 http://cubiq.org/iscrollも試しました
2. Drag'n'Dropには、このプラグインhttp://www.gotproject.com/blog/post2.htmlを使用しましたが、終了する必要がありました。 彼は要素のスケール値を考慮しませんでした。
3.クリックの代わりに、可能な限りタッチスタートを使用しました。
性能
1. iPad1とiPad2のパフォーマンスは大きく異なるため、iPad1を使用して開発することをお勧めします。
2. DOM要素を追加/削除する際の深刻な操作を避けるのが良いでしょう-iPad1は時々曲げられます。
3.また、headjs.comなどを使用してアプリケーションヘッダー内のファイルを接続することをお勧めします。これを使用しないと、ブラウザーは何も警告せずにクラッシュすることがあります。
一般に、作品の印象はさまざまでした。私は常にいくつかのハックを探す必要がありました。そのため、すべてが正常に進行していないと感じていました。 プロジェクトの評価で、彼は以前はiPadデバイスをまったく使用していなかったという事実により、2回間違えられました。
しかし、作業の最後に結果を見たとき、それは良かったです。