¿Hay alguna forma de habilitar un componente solo en móvil?

[hipp0]

Quiero habilitar este botón “Nuevo Tema” en la esquina inferior derecha en dispositivos móviles para que sea similar a X.com New Topic Header Button

Pero no en el escritorio.

[RGJ (Richard - Communiteq)]

Discourse se está alejando de la distinción tradicional entre escritorio y móvil. Consulta Designing for Different Devices (Viewport Size, Touch/Hover, etc.), que también contiene consejos sobre cómo lograr lo que deseas.

[hipp0]

Entiendo, gracias por la información.

Pero, ¿cómo haría para que un componente se renderice solo para dispositivos más pequeños?

No estoy muy seguro de cómo referenciar un componente o habilitarlo para uno u otro.

[RGJ (Richard - Communiteq)]

El ejemplo está en ese mismo tema

@system

import Component from "@glimmer/component";
import { service } from "@ember/service";

class MyComponent extends Component {
  @service capabilities;

  <template>
    {{#if this.capabilities.viewport.lg}}
      Este texto se mostrará para dispositivos más grandes que el punto de interrupción lg
    {{/if}}

    {{#unless this.capabilities.viewport.sm}}
      Este texto se mostrará para dispositivos más pequeños que el punto de interrupción sm
    {{/unless}}
  </template>
}