レスポンシブ対応でPCとスマホで違う画像を使う

質問

レスポンシブ対応でPCとスマホで違う画像を使う方法はたくさん有りますが。

最近現場ではどの方法を取っていますか？

srcsetでいけるようにもうなっていますかね？
IE8がまだかな？

回答No.2

sunawachi2 · ベストアンサー

私の場合はimgタグのname属性を使用してjavascriptでPCの場合とスマホの場合で変更するようにしています。

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
var tags=document.getElementsByName("name属性の値");
for(var i=0;i<tags.length;i++){
　　 tags[i].・・・命令文
}
}

と書くことによってスマホの場合の挙動を指定しています。

お礼

ご自身で作られたのですね。
すごいですが、ちょっと私には難しいです。

回答No.3

ORUKA1951

＞スマホは回線がまだ脆弱な事が多いのでスマホ用のときは小さい画像を採用にして負担を小さくするという意味でディスプレイの解像度で読み込む画像を変える必要がある場合どのようにしていますかということです。
　それだと逆です。PCの場合画面解像度は96dpiで計算されて、ディスプレイに表示されます。ディスプレイ自体の解像度(1インチあたりいくら点があるか)とは関係ない。スマホの場合はディスプレイの解像度が高いために、OSで解像度を大きく計算して高解像度のディスプレイに表示しますから、96dpiの通常の画像では汚くなってしまいます。
　そのためにスマホ用には高画質の画像を読み込ませよう!!というのが、srcsetです。
＞スマホ用のときは小さい画像を採用にして
　とは逆の目的です。

　mediaqueryで、
@media screen and (max-width: 480px) {...}
　として、デザインを変更する。
★先に回答したように、リキッドでデザインされているページで、横幅が480px以下になると、伸縮していた画像は必要以上に無駄なデータ量になりますから、
[セレクタ]{
　　width:80%;
　　background-image:url(highImage);
　　background-size:cover;
}
@media screen and (max-width: 480px) {
　　width:100%;
　　background-image:url(lowImage);
}
で済ませたりします。
　また画像自体がコンテンツの場合は、要素別にdispaly:none;display:block;などを組み合わせればよい

　いずれにしても、スマホ用、あるいは携帯電話(media="handheld")に対して、低画質のものを提供するためにsrcsetは可笑しいです。
　なぜって、デバイスの解像度が高ければ低画質を送るってことになるので・・・。

IE8にmediaquery対応させたければ
css3-mediaqueries-js - css3-mediaqueries.js: make CSS3 Media Queries work in all browsers (JavaScript library) - Google Project Hosting( https://code.google.com/p/css3-mediaqueries-js/ )

回答No.1

ORUKA1951

IE8に対応させる場合は、javascript使います。
レスポンシブ:mediaqueryは、CSS2.1のmedia別スタイルシートの拡張ですから、基本はあくまでmedia別の振り分けと、リキッドでデザインされたものです。
　普通にリキッドで製作して、その許容範囲を超えたときスタイルシートを変更する。

　srcset属性はWHATWG( http://www.whatwg.org/ )のHTML5、ひょっとしてW3C( http://www.w3.org/ )のHTML5.1でも採用されるかもしれないものです。

　これはレスポンシブとは関係ないです。ディスプレイの解像度で読み込む画像を変えるためのものです。srcで画像を指定しておいて、imgの表示サイズをそれよりも小さくしたのと同じような意味合いを持ちます。

　それよりもスマホとPC用のブラウザで問題になるのは、ユーザーインターフェースじゃないかと。それはmediaqueryを使うしかない。もちろん全体としてmedia別スタイルシートがあっての上です。クライアントは背素養ブラウザやスマホのようなscreenメディアだけじゃない。

お礼

説明不足だったかも知れません。

スマホは回線がまだ脆弱な事が多いのでスマホ用のときは小さい画像を採用にして負担を小さくするという意味でディスプレイの解像度で読み込む画像を変える必要がある場合どのようにしていますかということです。

それともそろそろ３Gを使っている人は無視できるようになるのでしょうか？

補足

http://www.webopixel.net/javascript/804.html
ちょっと大変ですが、srcset属性がまだIEで使えないならこちがよいのですかね？