カテゴリー:
レスポンシブ画像
閲覧数:741 配信日:2015-08-19 22:00
案5-1.window.innerWidth
▼HTML
<img id= "target" > |
▼JS
function changeImgSrc(width) { if (width > 768 ) { document.getElementById( 'target' ).src = "img/768.jpg" ; } else { document.getElementById( 'target' ).src = "img/640.jpg" ; } } var width = window.innerWidth; changeImgSrc(width); // 初回 console.log(width); // 1024 window.onresize = function resize() { var currentWidth = window.innerWidth; if ( (width < 768 && 768 <= currentWidth) || ( width > 768 && 768 >= currentWidth) ) { // 画面幅が 768px を堺に変わった時だけ呼ばれる changeImgSrc(currentWidth); } width = currentWidth; }; |
画面幅に応じて画像を出し分ける方法
案5-2.window.matchMedia
▼HTML
<img id= "target" > |
▼JS
function changeImgSrc() { if (window.matchMedia( "(min-width: 768px)" ).matches) { /* ビューポートの幅が 768 ピクセル以上の場合のコードをここに */ document.getElementById( 'target' ).src = "img/768.jpg" ; } else { /* ビューポートの幅は 768 ピクセル未満の場合のコードをここに */ document.getElementById( 'target' ).src = "img/640.jpg" ; } } window.addEventListener( 'resize' , changeImgSrc, false); window.addEventListener( 'load' , changeImgSrc, false); |
・window.matchMedia / スクリーンサイズに応じて JavaScript コードを処理分岐