モバイル開発のまとめ
1、-webkit-tap-highlight-color:rgba(255,255,255,0)はiosとandroidの下で要素をクリックしたときに現れる影を同時に隠すことができます.メモ:transparentのプロパティ値はandroidで無効です.
2、-webkit-appearance:noneは入力ボックスの奇妙なインナーシャドウを同時に遮断することができます.
3、-webkit-transform:translate 3 d(0,0,0)iosではアニメーションをよりスムーズにすることができますが(この属性はハードウェア加速モードを呼び出すことができます)、androidでは乱用できません.見たことのないバグの多くはそのためです.
4、@-webkit-keyframesは、あなたが考えているアニメーションを多く定義し、-webkit-transitionで呼び出すことができます.
5、-webkit-background-sizeはハイビジョンアイコンができますが、一部の低バージョンのandroidはbackground-sizeしか認識できないので、両方書く必要があります.この属性を使用する場合は、ツリー勇coverという値を推奨し、幅と高さを自動的にマッチングすることができます.
6、text-shadowこの属性を多く使うと、文字効果を美化することができます.
7、border-radius、box-shadow、gradient、border-image、解釈せず、コードを簡素化することができる.
8、android、ios 4および以下、幅/高ブロックレベルの要素を固定するoverflow:scroll/autoは失効し、ブラウザのバグに属し、サードパーティのツールで実現することができる.
9、ios 5+はscrollTo(0,0)でブラウザアドレスバーを自動的に非表示にすることができます.
10、widthは幅で、initial-scaleはスケールを初期化し、maximum-scaleはユーザーのスケールの最大スケールを許可し、minimum-scaleはユーザーのスケールの最小スケールを許可し、user-scalableはユーザーのスケールを許可するかどうか.11、ユーザーがメイン画面に追加し、webappのサポートを提供することを許可する.
12、css 3アニメーションは自動フォーカスに影響しますので、自動フォーカスはアニメーションが実行される前に行うか、直接捨てます.
13、media queryを使用して異なる画面に適している.
14、ドメイン外リンクが多い場合、DNS PrefetchingはDNSの事前解析を手伝うことができます.
15、もしあなたのサイトがもっとSNSで伝播することを望んでいるならば、Open Graph Protocolはあなたに適しています.
16、iScrrollを使用する場合、focus{outline:0}ダミークラスは使用できません.そうしないと、スライドが詰まってしまいます.
17、-webkit-user-select: none; ユーザによる複製を禁止する.を選択します.
======== lazyload.jsはリストピクチャの非同期ロードを実現する
2、-webkit-appearance:noneは入力ボックスの奇妙なインナーシャドウを同時に遮断することができます.
3、-webkit-transform:translate 3 d(0,0,0)iosではアニメーションをよりスムーズにすることができますが(この属性はハードウェア加速モードを呼び出すことができます)、androidでは乱用できません.見たことのないバグの多くはそのためです.
4、@-webkit-keyframesは、あなたが考えているアニメーションを多く定義し、-webkit-transitionで呼び出すことができます.
5、-webkit-background-sizeはハイビジョンアイコンができますが、一部の低バージョンのandroidはbackground-sizeしか認識できないので、両方書く必要があります.この属性を使用する場合は、ツリー勇coverという値を推奨し、幅と高さを自動的にマッチングすることができます.
6、text-shadowこの属性を多く使うと、文字効果を美化することができます.
7、border-radius、box-shadow、gradient、border-image、解釈せず、コードを簡素化することができる.
8、android、ios 4および以下、幅/高ブロックレベルの要素を固定するoverflow:scroll/autoは失効し、ブラウザのバグに属し、サードパーティのツールで実現することができる.
9、ios 5+はscrollTo(0,0)でブラウザアドレスバーを自動的に非表示にすることができます.
10、widthは幅で、initial-scaleはスケールを初期化し、maximum-scaleはユーザーのスケールの最大スケールを許可し、minimum-scaleはユーザーのスケールの最小スケールを許可し、user-scalableはユーザーのスケールを許可するかどうか.11、ユーザーがメイン画面に追加し、webappのサポートを提供することを許可する.
12、css 3アニメーションは自動フォーカスに影響しますので、自動フォーカスはアニメーションが実行される前に行うか、直接捨てます.
13、media queryを使用して異なる画面に適している.
14、ドメイン外リンクが多い場合、DNS PrefetchingはDNSの事前解析を手伝うことができます.
15、もしあなたのサイトがもっとSNSで伝播することを望んでいるならば、Open Graph Protocolはあなたに適しています.
16、iScrrollを使用する場合、focus{outline:0}ダミークラスは使用できません.そうしないと、スライドが詰まってしまいます.
17、-webkit-user-select: none; ユーザによる複製を禁止する.を選択します.
======== lazyload.jsはリストピクチャの非同期ロードを実現する
// jquery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
// lazyload
<script type="text/javascript" src="http://www.jo2.org/js/jquery.lazyload.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function($){
$("img").lazyload({
placeholder : " ", //
effect : "fadeIn" // ( )
});
});
</script>