カテゴリー:
レスポンシブ画像
閲覧数:767 配信日: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); //1024window.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 コードを処理分岐