# Designing for Different Devices (Touch & Hover)
**URL:** https://meta.discourse.org/t/designing-for-different-devices-touch-hover/367810
**Category:** Developer Guides
**Created:** [27. Mai 2025 um 18:17 UTC](https://meta.discourse.org/t/designing-for-different-devices-touch-hover/367810 "2025-05-27T18:17:05Z")
**Posts on this page:** 1
**Showing post:** 1
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [27. Mai 2025 um 18:17 UTC](https://meta.discourse.org/t/designing-for-different-devices-touch-hover/367810/1 "2025-05-27T18:17:05Z")
This document outlines the APIs used to adapt Discourse’s user interface for different devices.
### Touch & Hover
Some devices only have touchscreens, some only have a traditional mouse pointer, and some have both. Importantly, touchscreen users cannot “hover” over elements. Therefore, interfaces should be designed to work entirely without hover states, with hover-specific enhancements added for devices that support them.
There are several ways to detect touch/hover capability via CSS and JavaScript. For consistency, we recommend using Discourse’s helpers instead of those CSS/JS APIs directly.
For CSS, you can target the `.discourse-touch` and `.discourse-no-touch` classes, which are added to the `` element. These are determined based on the `(any-pointer: coarse)` media query.
For example:
```scss
html.discourse-touch {
// SCSS rules here will apply to devices with a touch screen,
// including mobiles/tablets and laptops/desktops with touch screens.
}
html.discourse-no-touch {
// SCSS rules here will apply to devices with no touch screen.
}
```
This information is also available in Ember components via the capabilities service:
```gjs
import Component from "@glimmer/component";
import { service } from "@ember/service";
class MyComponent extends Component {
@service capabilities;
{{#if this.capabilities.touch}}
This text will be displayed for devices with a touch screen
{{/if}}
{{#unless this.capabilities.touch}}
This text will be displayed for devices with no touch screen
{{/unless}}
}
```
### Legacy Mobile / Desktop Modes
Historically, Discourse shipped two completely different layouts and stylesheets for “mobile” and “desktop” views, based on the browser’s user-agent. Developers would target these modes by putting CSS in specific mobile/desktop directories, by using the `.mobile-view`/`.desktop-view` HTML classes, and the `site.mobileView` boolean in JavaScript.
These techniques are now considered deprecated and should be replaced with the [viewport and capability-based strategies](https://meta.discourse.org/t/-/409279) discussed in the next document. For backwards-compatibility, legacy desktop/mobile CSS is used when the viewport is larger/smaller than the `sm` threshold.
## See also
- [Designing for Responsive Widths](https://meta.discourse.org/t/-/409279) — breakpoints, viewport size, and container queries.
- [Guidelines for CSS classes using BEM](https://meta.discourse.org/t/-/361851) — CSS class naming conventions.
* * *
This document is version controlled - suggest changes [on github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/03-code-internals/28-designing-for-devices.md).
---
_[View the full topic](https://meta.discourse.org/t/designing-for-different-devices-touch-hover/367810)._