如果屏幕宽度 <= 699，则交换图像 src

Question

I have two images "image-big.jpg" and "image-small.jpg" I want to via javascript detect if screen width <= 699 and change the SRC of my image with class="imageswap" from image-big.jpg to image-small.jpg.

So basically if they are on a portable device it will display the smaller image.

I am novice at best with javascsript and any help is gratefully appreciated!

Answer 1

Bind to the window onresize event:

window.onresize = function(event) {
    if(window.innerWidth && window.innerWidth===699)
       document.getElementById('myImg').src = 'newSource';
    else if(document.body.offsetWidth && document.body.offsetWidth===669)
       document.getElementById('myImg').src = 'newSource';
};

The else if is for IE < v.9

Answer 2

Its no in specs but screen works fine in all browsers.

if(screen.width <= 699){
   // do you logic
}

Answer 3

1st approach: client-side. Set classname to html tag on dom ready after detection device type. Use css:

html.big .image-div {background-image:url('big.jpg')}
html.small .image-div {background-image:url('small.jpg')}

2nd approach: redirect. Use 2 different URLs and redirect for small size by detection User-Agent. It's better to use User-Agent (navigator object) than window/screen width

Usually I preffer redirects, because you have better code and page look when you can customize it for specific device. It's the way how leaders behave.

Answer 4

Try media-query.

.imageswap{
 background-image:url('small.jpg');
}
    @media screen and (max-width: 699px) {
      background-image:url('small.jpg');
    }