スマフォ用に画像を切り替え jQuery編

PCとスマフォで画像を切り替えるためには、一般的にはcssの@mediaで

@media screen and (min-width: 38.75em){
}

みたいな感じでレスポンシブデザインにしていくわけだが、なんらかの理由でcssを使えない場合がある。

そんな時はjQueryで無理やり書き換えることもできる。

HTML
<img id=”photo” src=”/img/pc.jpg”>

JS
<script>
jQuery(function (){
var WindowSize = jQuery(window).width();//ブラウザ画面幅取得
if (WindowSize <= 1000){//画面幅が1000px以下の場合・・・
jQuery(‘#photo’).attr(‘src’,’/img/smt.jpg’);//jQueryのattrを使って、#photoのsrcを書き換える
}
});
</script>

追記
#photoみたいなid/ classがうまく拾えない（セレクタ指定ができない）時は、

jQuery(“img[src = ‘/img/pc.jpg’]”).attr(‘src’,’/img/smt.jpg’);

のように、そのものずばりの画像ファイル名src指定でセレクタ選んで、attrで書き換える方がいいかもしれない。