gpt4 book ai didi

javascript - 根据移动设备更改图像源

转载 作者:行者123 更新时间:2023-12-03 11:16:47 25 4
gpt4 key购买 nike

我正在尝试更改小屏幕尺寸设备的图像源。我只想定位宽度小于 1024 像素的移动设备(不是桌面浏览器)。

我不想使用媒体查询,因为如果我更改桌面上的浏览器大小,它们将加载高分辨率和低分辨率版本的图像。我可以单独定位设备,但这会让我的 css 文件变得非常困惑。

有什么正确的解决方案可以仅为移动设备加载较小的图像吗? (特别是比平板电脑小)。此外,使用 userAgent 来定位 Android 平板电脑和 Android 智能手机等设备并不容易。

我正在使用此代码,但在刷新页面后它也会导致重复文件加载。

$(function() {
if($(window).width() <= 1024) {
$(".slides-container li img").each(function() {
$('.slides-container li img').attr('src',function(i,e){
return e.replace("img/galeri/large","img/galeri/medium");
});
});
}
});

最佳答案

尝试为窗口大小调整执行事件处理程序:

<body onload="window.addEventListener('resize', setPanels); setPanels();">

function setPanels()
{
var windowWidth = window.innerWidth;
if(windowWidth < 500)
{
document.getElementById('your image').src = 'new image source';
}
else
{
document.getElementById('your image').src = 'new image source desktop';
}
}

关于javascript - 根据移动设备更改图像源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27308444/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com