4

ピクセル比に基づくメディア クエリを使用して、適切な解像度の画像をクライアント デバイスに配信する Web アプリがあります。たとえば、Windows デスクトップに 1 倍の画像を配信し、Retina ディスプレイを搭載した iPhone に 2 倍の画像を配信します。

HTML5 アプリケーション キャッシュ機能を使用して、Web アプリをオフラインで使用できるようにすることに関心があります。これを行うには、アプリに必要なすべてのファイルをリストしたマニフェスト ファイルを作成する必要があります。ユーザーがアプリにアクセスすると、ブラウザはマニフェストを取得し、オフラインにする準備として、マニフェストにリストされているすべてのファイルをダウンロードします。

マニフェストに 1x と 2x の両方の画像を配置する必要があり、すべてのクライアントがすべての画像をダウンロードすることになるため、これは私のメディア クエリのポイントを無効にするように思えます。

頭に浮かぶ主な解決策は、マニフェストに 1x または 2x の画像を含める必要があるかどうかを判断するためにユーザー エージェント スニッフィングを使用して、マニフェストを動的に配信することです。これは私にとっては実現可能ですが、この問題に対処するために他にどのような解決策があるのか​​ 知りたいですか、それとも既知の制限/癖ですか?

4

2 に答える 2

0

メディア クエリを使用して、特定のデバイスごとに必要な画像だけを選択的にダウンロードできるのではないかと思います。これまでの結果では、一部の画像が不要であると想定することが合理的である場合、メディア クエリは必要な画像のみをダウンロードしようとすることが示されています。そのページの下部にあるテストセブンは、あなたの質問に非常に関連しているようです.

ピクセル比率のメディア クエリを使用して CSS ファイルを作成し、それをマニフェスト ファイルにリストしてから、デバイスをチェックして、不要な画像リソースを実際にダウンロードしたかどうかを確認できます。

于 2014-10-14T16:08:15.587 に答える
0

私自身も同じ要件に取り組み、AppCache および/または Cordova の有無にかかわらず動作することを目的とした、このためだけのエクスプレス ミドルウェアを作成しました。

コンテンツ画像、メディアクエリを含む css ファイル、またはその他のファイルで使用できます。ファイルに @[num]x を追加するだけで、「通常の」ファイルの代わりにそれが提供されます (独自のプレフィックスとサフィックス文字列)。

つまり、ブラウザーがデバイス ピクセル比 2 のデバイスで mypic.png という名前のファイルを要求すると、ミドルウェアは実際に mypic@2x.png を最初に提供しようとし、それが存在しない場合にのみ mypic を提供します。 .png.

静的高密度

static-denser-demo

アップデート

Service Workersを使用すると、より洗練されたソリューションを実現できますが、現時点ではすべてのブラウザーでサポートされているわけではありません。

http://caniuse.com/#feat=serviceworkers

于 2015-04-30T17:26:21.670 に答える