html - モバイル サイトで使用する画像のサイズ

Question

モバイル サイトのテンプレートをデザインしていて、ロゴのサイズや背景などがわからないという問題が発生しました。

Jquery モバイル API と HTML5 / CSS3 を使用します。これにより、基本的にサイズを気にせずにサイトのアーキテクチャ全体を作成できますが、背景や画像などの外部アセットに関しては、最適なサイズがわかりません。ほとんどのデバイスとの互換性を高めるために。

Answer 1

iPhone 4S/5 は、幅 640 ピクセルの高解像度スクリーンを備えています。多くの Android スマートフォンの幅は 720 ピクセルですが、800 ピクセルに達するものもあります。それ以上のものはおそらくタブレットと見なされます。

したがって、幅広い互換性に関してできる最善のことは、単一の CSS スタイルです。

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

これにより、画面の解像度に関係なく、画像がそれを含む要素よりも大きくならないことが保証されます。(モバイル ユーザーを念頭に置いてレスポンシブ サイトを構築する場合、要素の幅、マージン、およびパディングはすべて、可能な限りパーセンテージとして計算する必要があります。) 明らかに、多くの携帯電話が必要とするよりも多くの画像データをダウンロードしていることも意味しますが、 2 色のロゴを扱っていますが、大きな違いはありません。いつものように、画像はできるだけ少なく、小さくしてください。

さらに、写真を扱っていない場合は、SVG 画像を確認する必要があります。ベクターベースであるため、どの解像度でも完全にサイズ変更でき、IE8 と Android 2.x を除くほぼすべてのブラウザーと互換性があります。

Answer 2

次の html コードを検討してください。

<img src="images/myimage.jpg" alt="image">

その例を見ると、画面サイズに応じて複数の画像が必要になります。ほとんどのブラウザは最初に HTML ドキュメントを見て、Javascript をロードする前に画像をプリロードするため、Javascript は完璧なソリューションではありません。

そのため、レスポンシブ イメージ サーバーを使用してください。

Sencha.io Srcを使用しました。これは、デバイスの画面を把握し、画面サイズの制約に合わせて画像を縮小します (画像のみを縮小します)。Sencha.io はブラウザの useragent 文字列を使用して、データベース内のデバイスを検索します。画像をデバイスの最大幅に縮小し、30 分間使用できるキャッシュに保存します。

そのように使用します：

<img src="http://src.sencha.io./http://[your domain and path]/images/myimage.jpg" alt="image">

PS: 欠点もあります。デバイスの検出に依存しており、すべての画像をサード パーティ経由でルーティングする必要があります。しかし、現時点では優れたソリューションではないため (メディア クエリを使用しても、適用されないメディア クエリ内のリソースをダウンロードするブラウザーに対処する必要があります)、これが役立つことを願っています!

Answer 3

これには、CSS メディア クエリを使用する必要があります。こちらの記事をご覧ください: http://davidwalsh.name/image-max-width

/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      img { max-width: 100%; }
}

/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
      img { max-width: 100%; }
}