Html5-boilerplate: 1つだけが機能する場合、6つの異なるアップルタッチアイコンが必要ですか?

作成日 2013年05月30日  ·  28コメント  ·  ソース: h5bp/html5-boilerplate

144x144pxに設定された1つのapple-touch-iconpngだけが古いデバイスでも使用されるため(自動的に縮小されます)、6つの異なるバージョンを作成する必要はないと思います。

最も参考になるコメント

「欠点は、これらのデバイスが大きな高品質の画像をロードする一方で、はるかに小さなファイルでも同様に機能することです。」
したがって、誰かが[ホーム画面に追加]をクリックした場合にのみ、少し重いpngをロードする必要があります(数キロバイトだけ大きくなります)...これは私に関する限り完全に受け入れられ、はるかに優れています6つの異なるサイズのアイコンを作成します... 6つすべてをロードするためにページにHTMLを含める場合は特に優れています。

全てのコメント28件

これはここで説明されています: http

「欠点は、これらのデバイスが大きな高品質の画像をロードする一方で、はるかに小さなファイルでも同様に機能することです。」
したがって、誰かが[ホーム画面に追加]をクリックした場合にのみ、少し重いpngをロードする必要があります(数キロバイトだけ大きくなります)...これは私に関する限り完全に受け入れられ、はるかに優れています6つの異なるサイズのアイコンを作成します... 6つすべてをロードするためにページにHTMLを含める場合は特に優れています。

ニール、
これらのアイコンを作成する簡単な方法が必要な場合は、 H5BPマルチレイヤーFavIconsリポジトリをお勧めしますか? 恥知らずなプラグだとは思いますが、今日もこれを使って、多層ファビコンを含む7枚すべての画像を10分以内で完成させました。

それが役に立てば幸い!

わかりました、ありがとう。 しかし、個々のデバイスをターゲットにするために複数の特定のグラフィックを作成することが正しいアプローチであることにまだ同意しません(あまり「応答性の高い」アプローチではありません)。 1つの画像を作成することは、さらに高速/簡単でクリーンであり、ページの読み込みに重みが加わっていない場合(ホームに追加するという「リクエスト」の後にのみ読み込まれる)、古いデバイスに画像を配信することに問題はありません。画面)そして私達はこれらのイメージ間の違いの数kについて話しているだけです。

ホーム画面に追加したときにのみダウンロードされた場合、私はあなたのポイントを見ることができます。 個人的には、シングルアイコンルートも行っています。

シングルアイコン(およびfavicon.ico)の場合は+ 1、HTMLリンクなしのアプローチ。

@mathiasbynensは、タッチアイコンの詳細な説明をありがとうございます。 でも要約を読んだときは笑わなければなりませんでした。 あなたの提案のためではなく、私がプロプライエタリBSを嫌う理由のためです。 まとめさせていただきます。

  • Androidを完全にサポートするには、アップル独自のhtmlタグを使用する必要があります。
  • iOSのみを気にする場合は、アップル独自のhtmlタグを使用する必要はありません。
  • 「怠惰な」アプローチは、apple.comが行うことを正確に行うことです。

要約すると、多くの異なるタッチアイコンを使用することが最善の解決策である主な理由は2つあります。

  • パフォーマンス/データプランの使用制限:ホーム画面に追加するときに不必要に大きな画像を読み込まないようにします。
  • アートディレクション:私の経験では、デザイナーは一般的に自動サイズ変更に依存することを嫌い、むしろ適切な寸法でアイコンを提供します。

そうは言っても、私は怠惰で、シングルアイコンソリューションも使用しています。 しかし、それはそれが私見の頼りになる解決策であるべきだという意味ではありません。

@ryanswedal :D

HTMLリンクがページに含まれている場合、ページの読み込み時に呼び出されるかどうか誰かが知っていますか? もしそうなら、それはワンアイコンアプローチのさらに大きな議論です...そしてHTMLリンクを含めないことです。

私がこれを調査したとき、IIRCのテストでは、 <link>した場合でも、ページの読み込み時にタッチアイコンが要求されていないことが確認されました。

知っておくと良い。 ありがとう!

ええ、単一アイコンアプローチの場合は+1です。 タッチアイコンは自己文書化されていないため、それらを同期するためのツールを文書化する機能がないルートに6があると、面倒でメンテナンスが多くなります。

ルートにすべてのアイコンがある場合、保守性の問題に同意します。 私は本当に良い解決策を見ていませんが、 <link>タグを追加します(シンボリックリンクは実際にはその問題を解決しません)。

しかし、現時点では、これらのタグでindex.htmlのマークアップを肥大化させるべきではないと思います。 モバイルボイラープレートはこれを行います。
とにかく、アイコンを別のフォルダに移動する方法を見つけるのは簡単だと確信しています。 ドキュメントには、このトピックに関する短いセクション

iOS 7の時点で、RetinaディスプレイiPhoneの推奨タッチアイコンサイズは114×114ピクセルから120×120ピクセルに増加しました。 私の投稿はそれを反映するように更新されました。

ここで解決策を見つけることができますか? そのままにしますか、それとも1つのアイコンのアプローチに移行しますか?

まあ私の投票は確かに1つのアイコンのアプローチになります

2013年7月24日水曜日、ハンスクリスチャンラインルは次のように書いています。

ここで解決策を見つけることができますか? そのままにしますか、それともに移動しますか
1つのアイコンアプローチ?


このメールに直接返信するか、Gi tHubhttps://github.com/h5bp/html5-boilerplate/issues/1367#issuecomment-21507073で表示してください

ニール・クリー

携帯から送信:087 2174891

http://www.fuel.ie

少ないほど、単純であるほど良いです。 1つだけで十分であり、機能する場合は、なぜそれを使用しないのでしょうか。

+1対1!

また、シンプルで応答性の高い方法を採用したいと思いますが、アイコンの場合、1つの例外がありました。異なるスケールのアイコンは、そのサイズで明確にするために再設計が必要になる場合があります。

たとえば120x120の複雑なアイコンがあり、それを32x32で使用したい場合は、認識できなくなる可能性があります。 小さなアイコンをはるかに大きなアイコンに拡大縮小することは、ベクター形式の問題ではありませんが、デザイナーはさらに詳細を追加したい場合があります。

http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077#module -67936509

上のリンクから数ページ下にスクロールして、32x32と16x16のアイコンを表示します...このトピックにそれほど近くないかもしれませんが、さまざまなサイズのアイコンについて話すときは、それを考慮する必要があると思います。

ほとんどの場合、IMOは1つのアイコンで十分です。 明確さとファイルサイズを最適化するために小さなアイコンを作成することについてのメモを含む単一の大きなH5BPアイコンを提供することは良い修正です。

とは言うものの、H5BPは半意見であるため、単純さに関係なく、「正しい」方法と見なされるものはすべてリポジトリに含める必要があります。

#1425の6つのApple Touchアイコンのうち5つを削除するプルリクエストを作成しました。
フィードバックは大歓迎です。

この号の中で主な議論を続けてください。

+1

:+1:

+1

そもそもなぜ6つあったのかわからなかったと認めても大丈夫で、1つになるのは嬉しいので「なぜ」わからず怠惰な気分にはなりません。

追加するものが何もないときではなく、取り除くものが残っていないときに、完璧が達成されます。
—アントワーヌドサンテグジュペリ

:+1:

短くする時間がありませんでした。
—ブレーズパスカル
:いいぞ:

私はしばらくの間、1つの画像だけで実行しています。 1つの欠点は、多くのモバイルブラウザが他のファイルを要求することです。 HTMLのリンクタグでそれらを参照する必要はありませんが、これらのリクエストの404エラーでログがいっぱいになるのを避けるために、通常のすべてのサイズのルートディレクトリファイルを含めるように戻しました。

このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

roblarsen picture roblarsen  ·  5コメント

alrra picture alrra  ·  6コメント

roblarsen picture roblarsen  ·  8コメント

coliff picture coliff  ·  14コメント

roblarsen picture roblarsen  ·  5コメント