Question

我有两个图像“image-big.jpg”和“image-small.jpg”我想通过javascript检测屏幕宽度＆lt; = 699并从图像中更改我的图像的SRC = class =“imageswap” -big.jpg到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 if适用于IE＆lt;第9节

Answer 2

它的规格没有，但screen适用于所有浏览器。

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

Answer 3

第一种方法：客户端。检测设备类型后，在dom ready上将classname设置为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');
    }

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

4 个答案: