モバイルアプリケーションの開発中に、私が始めたときに知っておく必要のあることをいくつか見つけました。 そこで、小さなヒントの形式で記事を書くことにしました。 これらのヒントは、PhoneGap、Windows 8、Firefox OS向けのモバイルアプリケーションの開発により重点を置いています。 しかし、モバイルWebサイト開発者も便利です。 記事の最後に、最終的に何が起こったかへのリンクを提供します
メディアセレクターを信頼しないでください。
特にAndroidで。 キーボードを使用するとメディアセレクターが機能し、これも処理する必要があります。 アプリケーションのポートレートとランドスケープの外観が異なる場合、これは非常に深刻になります。 次の例は、これをよく示しています。
解像度の高さが800px以上の電話機でサンプルを開いた場合、カラーブロックは表示されません。 メディアセレクターが適用されますが、入力をクリックしてデータを入力すると、キーボードが開き、ブロックが表示されます（ウィンドウの高さが変化します）。
解決策： Javascriptを使用して向きを変更し、screen.availWidthおよびscreen.availHeightプロパティに基づいて向きを変更します。 これらのプロパティはFirefoxOSでは機能せず、orientationchangeイベントも機能しないことに注意してください。 同様のコードは、時間と労力を節約するのに役立ちます。
var displayModeLandscape = false; var width = 0; var height = 0; var setPortrait = function() { $('html').addClass('portrait').removeClass('landscape'); displayModeLandscape = false; }; var setLandscape = function() { $('html').addClass('landscape').removeClass('portrait'); displayModeLandscape = true; }; var currentOrientation = function() { width = screen.availWidth || $(window).width(); height = screen.availHeight || $(window).height(); if(height > width) { setPortrait(); } else { setLandscape(); } }; $(window).on('orientationchange', currentOrientation); currentOrientation();
reset.cssを拡張する
標準のreset.cssに、タパスの要素の選択をオーバーライドするスタイルを追加すると便利です。 きれいでも中立でもない
*:not(html) { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
グラフィックアクセラレーションを使用します。
アプリケーションのアニメーションを最適化するには、グラフィックアクセラレーションをサポートするプロパティが役立ちます。 これらには、変換、不透明度が含まれます。 css transformプロパティに注意し、これらのプロパティを移行する場合に備えて、左、上、右の代替として使用するようにしてください。 変換ははるかに高速です。
クリックではなくテープを使用してください。
モバイルブラウザーでクリックを処理する場合、300ミリ秒の遅延について既に書いています。 したがって、tachイベントとtapイベントを使用して、要素のクリックを処理します。 ジェスチャーの詳細について
は、対応する記事をご覧
ください。
例からわかるように、デスクトップでのタッチイベントとクリックイベントの処理の違いは、約100ミリ秒とモバイルブラウザーで約400ミリ秒です。
LocalStorageとキャッシュ
LocalStorageを使用して、ユーザー情報をキャッシュし、デバイスに情報を保存します。 LocalStorageは永続的なリポジトリであり、アプリケーションが更新されても残ります。 ただし、制限を忘れないでください。たとえば、iOの最大サイズは5MBであるか、JSON.parse（null）、他のすべてのブラウザーがnullを返す場合、Android <3.2のWebkitバージョンは例外をスローします。
適切なツールを使用してください。
適切なブラウザを使用して、アプリケーションをテストします。 AndroidまたはiOS用のアプリケーションを開発する場合は、Chrome、Firefox OS-Firefox、Windows 8-IE10を使用します。多くのアニメーションを含むゲームやアプリケーションを開発するには、
https：//github.com/mrdoob/stats.js/ライブラリも役立ちます。または、組み込みのChrome FPSカウンターを使用できます。
chrome：// flags /に移動して有効にするだけで、Chromeにはテープのエミュレーションがあります-これはジェスチャーのデバッグに非常に役立ちます。
スケーリングの禁止
次のタグをheadタグに挿入することにより、スケーリングを禁止し、ジェスチャーを追跡できるようになります。
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
ジェスチャーの最適化。
アプリケーションのパフォーマンスを向上させるためにジェスチャ処理が不要になったら、preventDefault（）およびstopPropagination（）を実行します。
コードを最適化します。
コードが非常に長く実行される場合、上記のすべてが意味をなしません。 プロファイラーを使用して細いスポットを見つけ、できるだけDOMを更新しないようにし、使用しないノードを常に削除または非表示（表示：なし）にします。 DOMが多いほど、操作が遅くなります。
あとがきの代わりに
最後に、
Google Playでライブでアプリケーションを見ることができます