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