两种滑块的iPhone断点问题 - CSS

Question

我的老板希望他的移动设备网站可滑动滑块，以及带桌面可点击按钮的滑块。我设法实现了一个半工作的解决方案，它将视网膜屏幕单独设置为具有可滑动版本（主要目标是iPhone）。但是，现在每个视网膜屏幕都有可滑动的版本，当视网膜桌面应该有可点击的箭头滑块时。

我正在使用CSS断点隐藏和取消隐藏基于设备的两个不同的滑块。有没有其他方法可以为iPhone而不是台式机指定我的移动滑块？

我正在寻找更好的断点，以确保所有手机都能获得可滑动的滑块，所有桌面都可以通过按钮获得滑块。谢谢你的帮助。

查看滑块示例：http://agentboris.com/home/index.php

这是我的断点CSS：

.displayphone{
    display: none;
    }

@media screen and (max-device-width:1081px)  {

.hidephone{
display: none
    }


.displayphone{
display: inline
    }

    }

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) 
{
    .hidephone{
display: none
    }


.displayphone{
display: inline
    }

    }