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

Question

我有两个图像“image-big.jpg”和“image-small.jpg”我想通过 javascript 检测屏幕宽度是否 <= 699 并使用 image-big.jpg 中的 class="imageswap" 更改我的图像的 SRC到 image-small.jpg。

因此，基本上，如果它们在便携式设备上，它将显示较小的图像。

我充其量是 javascsript 的新手，非常感谢任何帮助！

Answer 1

绑定到窗口 onresize 事件：

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';
};

适用于else ifIE < v.9

Answer 2

它没有规格，但screen在所有浏览器中都可以正常工作。

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

Answer 3

第一种方法：客户端。检测设备类型后，将类名设置为 dom 上的 html 标记。使用 css：

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

第二种方法：重定向。使用 2 个不同的 URL 并通过检测 User-Agent 重定向小尺寸。最好使用 User-Agent（导航器对象）而不是窗口/屏幕宽度

通常我更喜欢重定向，因为当您可以针对特定设备进行自定义时，您可以获得更好的代码和页面外观。这就是领导者的行为方式。

Answer 4

尝试媒体查询。

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