jquery - モバイルデバイス間で画像を提供する方法

Question

スマートフォンとタブレットの両方のモバイルデバイス用の Web ページを開発しています。

私は jQueryMobile を使用しているため、ほとんどの機能はすべてのデバイスで非常にうまく機能します。

私の問題は、タブレットを使用して最高の品質を得るために、非常に高解像度の画像を使用したいということです。720X1280 を使用すると、ページはタブレットでは見栄えがよくなりますが、スマートフォンではダウンスケーリングは行われません。

320x480 を使用してビルドする必要がありますか? その場合、スケーリングはタブレットで行われますか? 魂やガイドラインはありますか？

score 5 · Accepted Answer

レスポンシブ画像を使用します。そのため、その画像はデバイスのサイズに応じてスケーリングされます。

img {
  width: 100%;
  max-width: 100%;
}

上記の CSS コードは、親コンテナーのサイズを自動的に取得します。

ここにいくつかの素晴らしい例と記事があります。

アダプティブイメージ用の Javascript プラグイン:

柔軟な画像の優れたチュートリアル:

jquery - モバイル デバイス間で画像を提供する方法