仅通过css将桌面浏览器作为目标

对于应用程序，我只想显示桌面浏览器的自定义滚动条

通常，人们会使用媒体查询来定位小型设备，并根据屏幕的可用宽度调整布局。但这一次，我只是不想在手机和平板电脑设备上使用滚动条。我不知道如何解决这个问题，因为小型台式机（1024x768）使用的分辨率与某些平板电脑相同

有没有黑客之类的，所以我可以这样做：

@media (target-real-desktops-only) {
    ::-webkit-scrollbar {
        width: 17px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #959595;
        border-radius: 40px;
        border: 5px solid transparent;
        background-clip: padding-box;
    }
}

#桌面
仅屏幕和（最小宽度：992px）
#巨大的
只有屏幕和（最小宽度：1280px）

无法通过媒体查询确定。在我看来，最好的方法是通过检测设备是否为触摸设备来区分。你可以用它。Modernizer将自动向

html

添加

.touch

或

.no-touch

类。然后可以相应地添加样式

另一个选择是手动执行此操作。像这样：

document.querySelector('html').className += 
("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch ? ' touch' : ' no-touch';

然后以同样的方式添加您的样式

.no-touch ::-webkit-scrollbar {
    width: 17px;
}

.no-touch ::-webkit-scrollbar-thumb {
    background-color: #959595;
    border-radius: 40px;
    border: 5px solid transparent;
    background-clip: padding-box;
}

---

感谢检查设备是否“可触摸”是一个不错的方法！是否会为触摸屏笔记本电脑添加

.touch

类？对于带有触摸屏的笔记本电脑，此检查是无效的。我知道媒体查询是如何工作的；我问过是否有可能通过css检测浏览器是否为桌面浏览器（即使我将浏览器缩小到300px的宽度，我仍然只想针对桌面浏览器）。