你能为独立于分辨率的桌面添加 CSS 吗？

Question

您能否检测用户是通过触控设备还是使用鼠标查看您的网站？

有很大的平板电脑和很小的笔记本电脑，所以我觉得基于屏幕尺寸的媒体查询不能解决问题。

对于上下文：我有一些带有额外元素的按钮。我希望该元素在从 phone 或平板电脑查看时默认显示，并在从 laptop/desktop.

查看时悬停显示

这可能吗？

Answer 1

以更可靠的方式，您可以单独或一起使用 pointer 和 hover 媒体查询来实现您的尝试。

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}
/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    /* ... */
}
/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    /* ... */
}
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}

Pointer 媒体查询可帮助您了解站点所使用的定点设备的类型。 pointer 媒体查询的值为 'fine'、'coarse' 和 'none'。

虽然 hover 媒体查询用于了解主要交互机制是否可以轻松地悬停在元素上。值为 'hover' 和 'none'。

你能为独立于分辨率的桌面添加 CSS 吗？

Can you add CSS for desktop only that is resolution independent?

css

responsive-design