web-dev-qa-db-ja.com

モバイルサイト用の画像のサイズ

私たちはモバイルサイトのテンプレートを設計していますが、ロゴのサイズや背景などがわからないという問題に直面しました。

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

html5css3mobilejquery-mobile
10
multimediaxp

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

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

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

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

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

12
Blazemonger

画像のサイズは通常、CSSメディアクエリの標準を定義するようなものではないはずです。

これは、2015〜2016年の最も人気のあるデバイスのCSSメディアクエリの短いリストです。

必要に応じて、このリストに新しいデバイスのメディア静止を追加してください。

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

また、古いリスト https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ および https：// Gist .github.com/hs0ucy/3762901

2
Developer

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

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

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

それが理由です：レスポンシブな画像サーバーを使用してください！

Sencha.io Srcを使用しました。これにより、デバイスの画面がわかり、（only画像を縮小します）画像を画面サイズの制約に合わせる。 Sencha.ioは、ブラウザのユーザーエージェント文字列を使用して、データベース内のデバイスを検索します。それよりも画像をデバイスの最大幅に縮小し、30分間利用できるキャッシュに保存します。

そのように使用してください：

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

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

1
Chris Conway

これには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%; }
}
0
John Skoumbourdis