Question

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

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

是否有黑客或其他东西，所以我可以做类似的事情：

@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;
    }
}

Answer 1

媒体查询无法确定。在我看来，最好的方法是通过检测设备是否是触摸设备来区分。您可以使用Modernizr。 Modernizr会自动将.touch或.no-touch类添加到html。然后，您可以相应地添加样式。

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

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;
}

Answer 2

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px)

Media Queries: How to target desktop, tablet and mobile?

Answer 3

媒体查询如何定位桌面平板电脑和移动设备：

Look at this link: （来自www.stackoverflow.com）

仅通过css

3 个答案: