モバイル開発仕様
5591 ワード
他人の家から来たので、勉強して理解しています.
1.フォントの設定:
セリフなしフォントを使用します.
1
body {
2
font-family:
"Helvetica Neue", Helvetica, STHeiTi, sans-serif;
3 }
iOS 4.0+は英字フォントHelvetica Neueを使用し、以前のiOSバージョンではHelveticaを使用してダウングレードされていました.中国語フォントは中国語の黒体STHeiTiに設定されています.なお、中国語の黒体にはiOSのフォントライブラリは存在しません(
http://support.apple.com/kb/HT5878
ただし、システムは自動的に中国語の黒体STHeiTi互換ヒットシステムのデフォルトの中国語フォントの黒体-簡体字または黒体-繁体字
1 Heiti SC Light 黒体-ジェーン さいたい (iOS 7後廃棄)
2 Heiti SC Medium 黒体-ジェーン 中黒
3 Heiti TC Light 黒体-繁 さいたい
4 Heiti TC Medium 黒体-繁 中黒
オリジナルAndroidでは、中国語フォントと英語フォントの両方でデフォルトのセリフなしフォントを選択します.
1 4.0 以前のバージョンの英語フォントはオリジナルです Android 使用するのは Droid Sans、中国語フォント原生 Android 命中する Droid Sans Fallback
2 4.0 その後、中国語と英語のフォントは原生を使用します. Android 新しい Roboto フォント
3 その他のサードパーティ Android デフォルトのセリフなしフォントも一貫して選択
2.基本的なインタラクション:
グローバルCSSスタイルを設定し、図中の長押しポップアップメニューと選択したテキストの動作を避ける
1 a, img {
2 -webkit-touch-callout: none;
/*
リンクと画像のポップアップメニューを長押ししない
*/
3 }
4 html, body {
5 -webkit-user-
select: none;
/*
テキストの選択を禁止します(テキストなしで需要が選択されている場合は、これが必須です).
*/
6 user-
select: none;
7 }
3.モバイル性能:
公開前に必要なチェック項目
すべての画像を圧縮する必要があります80%質量に変換するjpgピクチャのような適度な損失圧縮を考慮する.
大きな図を複数の小さな図に切ることを考慮すると、banner図が大きすぎるシーンでよく見られる.
パフォーマンスの最適化をロードし、十分な高速化を実現
データをオフライン化し、localStorage にデータを緩和することを考慮する
初期要求リソース数
外部チェーンCSSでの@import導入回避内蔵小型の静的資源コンテンツを考慮する.
初期リクエストリソースgzip後の総ボリューム
静的リソース(HTML/CSS/JS/Image)圧縮を最適化しますか?大規模クラスライブラリのパッケージングを回避するアクセス層がGzip圧縮をオンにしていることを確認します(Gzipレベルを上げることを考慮して、CPUオーバーヘッドを使用してロード時間を交換します). 注意!画像の代わりにCSS 3を使用する.
初期ヘッダ以外の静的リソース(JS/CSS)遅延ロード 注意!初期ヘッダ以外のピクチャリソースをオンデマンドでロード(ビジュアル領域を判断) 注意!単一ページアプリケーション(SPA)は、非ヘッダスクリーントラフィックモジュールのロード遅延を考慮する.
Keep-Aliveリンク多重化を開く
パフォーマンスの最適化を実行し、操作が十分にスムーズになります.
iOS 300+msクリック遅延の問題を回避 注意!キャッシュDOM選択と計算ページの再描画をトリガーする操作を避けるDebounce連続トリガのイベント(scroll/resize/touchmoveなど)は、高周波繁トリガの実行を避ける 注意!できる限りイベントエージェントを使用し、一括バインドイベントを回避する
JSアニメーションの代わりにCSS 3アニメーションを使用するローエンド機で大量のCSS 3グラデーションシャドウ効果を使用することを回避し、ダウングレード効果を考慮してスムーズ度を向上させることができる.
HTML構造レベルは、のシンプルさを維持するのに十分です.
CSSプレミアムセレクタとプロビジョニングセレクタをできるだけ少なく使用する.
Keep it simple
オンライン性能検査評価ツール使用マニュアル
アクセス Google PageSpeed オンライン評価サイトアドレスバーにターゲットURLアドレスを入力、分析ボタンをクリックして検出を開始する.
PageSpeedが分析した提案に従って最適化し、赤色カテゴリの問題を優先的に解決する.
おすすめ読書
モバイルWEB性能
WEBキャッシュの最適化
RTT回数の最小化
要求負荷の最小化
ブラウザレンダリングの最適化
ソース:http://alloyteam.github.io/Spirit/modules/Standard/
1.フォントの設定:
セリフなしフォントを使用します.
1
body {
2
font-family:
"Helvetica Neue", Helvetica, STHeiTi, sans-serif;
3 }
iOS 4.0+は英字フォントHelvetica Neueを使用し、以前のiOSバージョンではHelveticaを使用してダウングレードされていました.中国語フォントは中国語の黒体STHeiTiに設定されています.なお、中国語の黒体にはiOSのフォントライブラリは存在しません(
http://support.apple.com/kb/HT5878
ただし、システムは自動的に中国語の黒体STHeiTi互換ヒットシステムのデフォルトの中国語フォントの黒体-簡体字または黒体-繁体字
1 Heiti SC Light 黒体-ジェーン さいたい (iOS 7後廃棄)
2 Heiti SC Medium 黒体-ジェーン 中黒
3 Heiti TC Light 黒体-繁 さいたい
4 Heiti TC Medium 黒体-繁 中黒
オリジナルAndroidでは、中国語フォントと英語フォントの両方でデフォルトのセリフなしフォントを選択します.
1 4.0 以前のバージョンの英語フォントはオリジナルです Android 使用するのは Droid Sans、中国語フォント原生 Android 命中する Droid Sans Fallback
2 4.0 その後、中国語と英語のフォントは原生を使用します. Android 新しい Roboto フォント
3 その他のサードパーティ Android デフォルトのセリフなしフォントも一貫して選択
2.基本的なインタラクション:
グローバルCSSスタイルを設定し、図中の長押しポップアップメニューと選択したテキストの動作を避ける
1 a, img {
2 -webkit-touch-callout: none;
/*
リンクと画像のポップアップメニューを長押ししない
*/
3 }
4 html, body {
5 -webkit-user-
select: none;
/*
テキストの選択を禁止します(テキストなしで需要が選択されている場合は、これが必須です).
*/
6 user-
select: none;
7 }
3.モバイル性能:
Androidローエンドマシンと2Gネットワークシーンでのパフォーマンスを考慮するには 注意!公開前に必要なチェック項目
すべての画像を圧縮する必要があります80%質量に変換するjpgピクチャのような適度な損失圧縮を考慮する.
大きな図を複数の小さな図に切ることを考慮すると、banner図が大きすぎるシーンでよく見られる.
パフォーマンスの最適化をロードし、十分な高速化を実現
データをオフライン化し、localStorage にデータを緩和することを考慮する
初期要求リソース数
< 4 注意!画像はCSS SpritesまたはDataURI を使用外部チェーンCSSでの@import導入回避内蔵小型の静的資源コンテンツを考慮する.
初期リクエストリソースgzip後の総ボリューム
< 50kb 静的リソース(HTML/CSS/JS/Image)圧縮を最適化しますか?大規模クラスライブラリのパッケージングを回避するアクセス層がGzip圧縮をオンにしていることを確認します(Gzipレベルを上げることを考慮して、CPUオーバーヘッドを使用してロード時間を交換します). 注意!画像の代わりにCSS 3を使用する.
初期ヘッダ以外の静的リソース(JS/CSS)遅延ロード 注意!初期ヘッダ以外のピクチャリソースをオンデマンドでロード(ビジュアル領域を判断) 注意!単一ページアプリケーション(SPA)は、非ヘッダスクリーントラフィックモジュールのロード遅延を考慮する.
Keep-Aliveリンク多重化を開く
パフォーマンスの最適化を実行し、操作が十分にスムーズになります.
iOS 300+msクリック遅延の問題を回避 注意!キャッシュDOM選択と計算ページの再描画をトリガーする操作を避けるDebounce連続トリガのイベント(scroll/resize/touchmoveなど)は、高周波繁トリガの実行を避ける 注意!できる限りイベントエージェントを使用し、一括バインドイベントを回避する
JSアニメーションの代わりにCSS 3アニメーションを使用するローエンド機で大量のCSS 3グラデーションシャドウ効果を使用することを回避し、ダウングレード効果を考慮してスムーズ度を向上させることができる.
HTML構造レベルは、のシンプルさを維持するのに十分です.
CSSプレミアムセレクタとプロビジョニングセレクタをできるだけ少なく使用する.
Keep it simple
オンライン性能検査評価ツール使用マニュアル
アクセス Google PageSpeed オンライン評価サイトアドレスバーにターゲットURLアドレスを入力、分析ボタンをクリックして検出を開始する.
PageSpeedが分析した提案に従って最適化し、赤色カテゴリの問題を優先的に解決する.
おすすめ読書
モバイルWEB性能
WEBキャッシュの最適化
RTT回数の最小化
要求負荷の最小化
ブラウザレンダリングの最適化
ソース:http://alloyteam.github.io/Spirit/modules/Standard/