Mobileコンポーネント開発にはどのような違いがありますか?

携帯電話端末のコンポーネント開発は、pcと共通点が多く、異なる点も多い.
共通点:
1コンポーネントは機能一致を実現し、対外露出インタフェース一致
相違点:
1ブラウザの互換性の違いを考慮
2 html 5とcss 3のサポートが異なる
3パフォーマンスの要件が異なります.携帯電話では、cpu、メモリの性能がpcと大きく異なるため、携帯電話では性能にもっと注目しなければならない.
4携帯電話の画面は多彩で、コンポーネントの構築を要求する際、responsive designを考慮すると
5で実現できるアニメーションの効果は異なります
携帯電話端末とpc端末が実現する機能と同様に、pc端末widgetのフレームワークを採用しています.一方、widgetフレームワークは、jqueryに依存せず、非常に独立して適用されます.一方、プラットフォームの一貫性をできるだけ維持し、移行と学習コストを削減します.
携帯電話端末には互換性のあるブラウザが必要なので、高度な属性を使って同じ機能を実現することができます.
例えば、携帯電話端末、dialogコンポーネント
html基本フレームワーク

<section class="dialog_mask">
    <div class="dialog_body">
    </div>
</section>
<style>
.dialog_mask{
    position: absolute;
}
.dialog_body{
    position:relative;
}
</style>

position:relative;このようなメリットはdialogです.bodyはmargin:0 auto;中央を実現し、js計算を使わない.
1マスク効果はどのように実現しますか?
background:rgba(0,0,0,0.75);
opacityはその継承性のため、サブノードにopacity=1を設定しても、サブノードは透明性を継承します.だからopacityを使うならdialog_bodyとdialog_maskで分ける.そして位置決め方法で彼らを重ねます.
一方background:rgbaは現在のノードのみに対して継承性を備えていない.これで、dialog_maskとdialog_bodyは一緒に置くことができます.
2マスクが必要でなければ、どうすればいいですか?
dialog_mask{width:0;height:0;overflow:visible}
PC側の実現と比較して、携帯電話側はiframeを必要とせず、selectなどのコントロールを隠す.maskとdialogはいずれも1つの構造の中にあり、より完全で、より安定しています.
パフォーマンス
携帯端末には高度なブラウザがありますが、cpuやメモリの性能はpcと大きく異なり、性能面では重点的に考慮する必要があります.
transitionはブラウザレベルの動作なので、jsよりも効率的です.また、ハードウェアを開通して加速すれば、アニメーションの効果はスムーズになります.
例えばslide demoコンポーネントでは、
カードの移動は、transitionでアニメーション効果を実現します
ハードウェアアクセラレータとプロパティの変更は、transform:translate 3 d(x,x,x)によって開始されます.
アニメーション:
css 3は強力なアニメーションを加え、コンポーネントの表現能力を豊かにします.
例えば、fade、flip、turn、flow、slidefade、slide、slideup、slidedownなどのスタイルは、cssで表すことができます.
例:
flip効果:

.turn.out {
	transform: rotateY(-90deg) scale(.9);
	animation-name: flipouttoleft;
	animation-duration: 125ms;
}
@keyframes flipouttoleft {
    from { transform: rotateY(0); }
    to { transform: rotateY(-90deg) scale(.9); }
}
   flip       。      dialog   。  ；http://api.jquerymobile.com/dialog/