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

Swap image src if screen width <= 699

本文关键字：交换 src 图像 屏幕 如果      更新时间：2023-09-26

我有两个图像"image-big.jpg"和"image-small.jpg"我想通过javascript检测屏幕宽度是否<= 699，并将我的图像的SRC与class="imageswap"从image-big.jpg更改为image-small.jpg。

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

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

绑定到窗口调整大小事件：

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 if适用于 IE

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

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

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

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

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

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

尝试媒体查询。

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