Javascript 针对具有类似分辨率的移动设备和PC的不同网站内容

我需要将我网站上的以下元素独立地显示在frontpage的同一位置：

1仅适用于分辨率高达992像素宽的智能手机的滑块（已配备） 2仅适用于分辨率高达2048像素宽度的平板电脑的滑块（需要添加） 3仅适用于分辨率从1024像素宽度开始的PC的滑块（已经有了）

正如您从要求中看到的，PC和平板电脑的分辨率相交，因此据我所知，无法使用基本的@media查询（而且“掌上电脑”不再正常工作）

我的站点标题中包含了以下.js，用于不同的目的，但我觉得它会有所帮助，因为它有助于将css分别添加到带有触摸屏和PC的设备中

<script>
document.documentElement.className += 
(("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
</script>

document.documentElement.className+=
（（“document.documentElement中的“ontouchstart”）？“touch”：“no touch”）；

当同时显示两个类别时，是否有人知道在没有情况的情况下为3个类别使用独立滑块的正确方法

网站地址：poiskdetei.ru

谢谢大家!