簡単に言えば、WebViewが表示され、ページのHTML、CSSやJSのコードが分析され、内部で実行することができ、それはおなじみのWebKitのコアを使用している窓の外にモバイルアプリケーションで開くことができます。AndroidとiOSには、対応するAPIを持っているので、複数のプラットフォーム上で実行がWebViewのベースであることが、コードを書く能力。
ページスクロール時に動的にコンテンツがある場合、ユーザーが直接そのようなバックに結合されたときに背面をロールとして、アウト除去するために、圧延ボリュームの他の部分を見ることができることを保証するために、ノードを削除算出することができます。この確実でないページにあまりにも多くのノード、自然増のパフォーマンス。私は予防策を言っているのではないこのプログラムを、しようとしませんでした。ダニエルは成功したが、それは可能だろう。
要するに滝を使用し、モバイルデバイス上の結論に達し、注意して使用する必要があり、ソリューションのパフォーマンスがなければなりません。
応答レイアウトビューポート
私たちは、あなたが以下を追加したいの<head>ページを知っています：
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」/>
ページのデザインは流線型デザインを極力ページを更新、水平および垂直方向の画面を反転するために、考慮すべき個人的な感触。しかし、それを言った、モバイルアプリケーションのページには、継続的な合理化の必要性と必要です。
典型的な、私たちのページは、オープンソースエディタKindEditorの国を選択し、その後、リッチテキストエディタを持っています。私はPC上だけで罰金を使用するプロジェクトを、信用するという意味ではありません。プレート上に、直接愚かな、実質的に廃止。編集者のために設計されたモバイルデバイスは、インターネットの周りではない探しています。エディタので、この事は、ネイティブコードは、より合理的なやってみましょう。
別のプラグインのより多くの痛みを伴うとはのMediaElementで、それは公式サイトで様々なブラウザ・プラットフォームをサポートするために主張したが、実際の効果は、として宣言されていない、H5のビデオ再生です。上記android4.0装置に互換性の問題のさまざまを有します。しかし、また、食事は、ソースコードを変更します。。。
結論はであるように、コンポーネント自体を書くことができれば、インターネットから誰かを探し、最終的に自分自身のトラブルにはありません。それは使用する準備ができている場合や、総合的な評価を行うようにしてください。ビジネスロジックとブレンドする機能など、私たちは、あなたが必要とする機器をサポートすることができます。
モバイルデバイス上でホバー擬似クラス固有の現象
私たちはしばしば使用マウスオーバー効果、実行した場合：ホバーを、近代的なブラウザと互換性の<a>ラベルや他のラベルで関係なく、通常のことができます。例えば、私はアイコンを持って、ホバー後にシャドウ効果が欲しい、書くかもしれません：
.icon：ホバー{ボックスシャドウ：2ピクセル2ピクセル2ピクセル;}
モバイルデバイス上で、何のマウスポインタは存在しません。指がアイコンをクリックすると、彼らは影の効果を表示することができ、この効果も可能です。しかし、あなたは[完了]をクリックしたときに、画面から指を離して、アイコンホバー効果は消えていない、アイコンの上に目に見えないマウスポインタがある場合は、のような、それは人々が理解することはできませんあるとして、影ではまだです。ページの残りの部分と、その後はホバー効果のアイコンをクリックすると、目に見えないマウスポインタがどこか別の場所に移動させたかのように、姿を消しました。
この現象は、iPadやAndroidデバイス上で持っています。この問題を回避するには、CSSの：メディアクエリを使用する必要がありますホバー擬似クラスは唯一のデスクトップブラウザで有効になります。
シャット問題は、iPadの画面を引き起こしました
一時的に画面までシャットダウンされますいくつかのスレッドのブラウザ後に画面をオフにし、バッテリーの電力を節約するためのiPadのデザインが一新オンになっています。jsのコードの継続的な実施のために必要がある場合、ない仕事の後に画面をオフにします。例えば、タイミング機能を実現するためのsetInterval関数を使用して、時間が秒ごとに更新しました。画面がオフの場合、5秒間画面の外にあるタイマー機能しません仕事は、あなたはまた、5秒間タイマーを停止します。
それはいくつかのページには関係ないかもしれません動的効果を達成することである場合。あなたのタイマーは、ビジネスロジックに関連している場合でも、メーターなどの試験の時間で、その影響は大きいです。候補者は、時間の休息の後、画面をオフにすることができます。これは望ましくありません。コードは、タイミング、または他のタスクのために便利なJSのであれば、継続的に行うことができます。私たちは、この問題を検討する必要があります。
タイマーのために、私たちは随時クロックが原因画面の閉鎖にクライアントによって引き起こされるタイミングエラーを解決するように、サーバと同期します。
別のタブに切り替えたときにiPad上のSafariブラウザを使用して、元のタグのスレッドが停止されるような方法を追加することで、同じ効果で画面をオフにします。
ポジショニング属性と再描画の紛争
モバイルデバイスが反転されると、水平および垂直スクリーンは、ページを再描画し、強力な画像処理性能、問題はないが、Androidデバイスの異なる種類のパフォーマンスを計算された、より少ない頻度ターンスクリーンインターフェース上の一部が表示されません、またはビデオが表示されます。より明白かつ深刻な状況である、位置を使用して、ページ上の要素がとき：固定または位置：絶対とき、要素のトランスフェクション画面の位置がページが大きすぎるターン画面である環境を変更することが障害になります後、あまりにも多くの演算性能を消費するエンジンをレンダリングする際に、そのような要素は常に正しく表示することができません。
私自身のアプローチは、WebViewのこの要素を聞かせて、それを再描画することで、操作要素の属性、クラス名、またはセット視界が再描画の動作をトリガすることができます。しかし、このアプローチは、時には無駄に、しばしば効果的ではありません。まさか、アンドロイドはあまりにも不安定なので、素晴らしいではありません。だから、私が書くでしょうではありません。
。$（ 'HTML'）、CSS（ '可視'、 '隠された'）;のsetTimeout（関数（）{$（ 'HTML'）、CSS（ '可視'、「目に見える）;。}、100）。
私は、WebViewの再描画が実際にページのちらつきにそう直接あったかどうかを疑う、この効果ははるかに優れ、一般的には、再描画が正しくできになります。
もう一つの恐ろしい状況は、それは学生が、彼らはウェブビューを操作するように、WebViewのも再描画または直接リロードすることができ、クライアントに行くことができ、HTMLが解決使用することはできません。
私はタッチイベントを言わなければなりません
デスクトップブラウザでは、基本的な機能には、マウスポインタが完了するまでに、モニタのクリックイベントに頼っていません、モバイルデバイスは、基本的に、このイベントをクリックしていないが、そのような重要なことのために、当然のことながら、エンジンはそれに応じて行われます。クリックイベントは、パッド上の非常に良好な応答することができます。
しかし、前述したように、白は常にいくつかの既製のプラグインを使用します。。私はあなたのデスクトップ上でマウスをドラッグすることができ、プラグインポップアップを使用しますが、パッドの上にドラッグすることはできません。モバイルデバイス上のエンジンは非常に良い取引を行ってクリックしますが、マウスダウンは、のMouseMoveは、のmouseupは気にしませんでしたが、我々は、コードに対応するtouchstart、touchmove、touchendイベントを追加する必要があります。
いくつかの現象が来るの理由を思い付くことができますが、現象のいくつかの種類が単純な理由に耳を傾けていない、私はここで説明する方法を知りません。ときタッチイベントとモニターしながらイベントをクリックして、複雑なページ構造およびその他の要因と相まっておそらく、換気行動のすべての種類が存在します。
まず、ページの構造を合理化することは最も重要なことではないです。第二に、奇妙な現象が異なるデバイスのために、私はハックの様々なを実行する方法を考えることができます。
どのデバイスのサポートをクリアするには
これは、技術とは何の関係もありませんし、意思決定の問題です。かどうかミニiPadの2,3,4は、基本的には互換性の問題は比較的安定していません。主にアンドロイド、2.xのからの4.xまでのシステムバージョンは、様々なブランド：サムスン、Asusの、Lenovoは、恩田、クール、広東省のティーチ雲のように他の人がより多くの主流を検討しました。そして、各ブランドの多くのモデルがあります。Androidのシステムを修正するために不謹慎なメーカーが結合された、ブラウザカーネルが変更されます。今全体の混乱ああは何ですか。
だから、プロジェクトの初期段階では、デバイスがサポートしているか明確にすることは非常に重要です。だから、これらのデバイスとの互換性をテストすることができていること。今日では、代わりに使用するデバイスを言うために、顧客のため、私たちは本当に排出される互換性のあるデバイスである方法を求めていました。本当に我々は唯一のフラットの下に数千ドルを使用することは、そのような顧客を持って、それは退屈な性能があります。
痛みを伴う闘争を経験し、信仰を解決するために解決することができ、原則に解決できない、本当にスケジュール通りに完成したプロジェクトをハック。もっと本当に有罪ああを感じるの種類を書き込みをハック！今、神は本当に親切の私に再び泣きする機会を与えた場合は、プロジェクトを見て、しかし、すべてがなくなっています。これは、いくつかの典型的なシェアを選んでレッスンは、多くのことを学びました。フロントエンドのモバイル開発に特化して目には、これらは小児科ですが、プログラマが白から来たとして、経験はまだ非常に重要です。