フロントエンドのコードが知らなくていいこと

ユーザーエージェントの情報を利用せずにUIを構築する

ポインティングデバイスの切り替え

適切なイベントを利用する

マウス・タッチパネル両方の場合はPointerEventを利用する。
マウスのみの場合はMouseEventを利用する。
タッチパネルのみの場合はTouchEventを利用する。

MouseEventを利用するとタッチデバイスで操作できない（デバック時に気付けない）箇所が出てきてしまうことがあるので、基本的にはPointerEventorTouchEventのどちらかを使うようにするとよい。

タッチパネルであるかを検知したい場合

Navigator.maxTouchPointsを利用して下記のように判定する。

if (navigator.maxTouchPoints > 1) {
  // タッチ操作可能なデバイス
} else {
  // タッチ操作が不可能なデバイス
}

特定のBrowser APIを提供しているか

これもAPIを利用する時にプロパティやメソッドが存在するかを確認すればよい。

if (navigator?.deviceMemory != null) {
  const { deviceMemory } = navigator;
} else {
  // デバイスのメモリ量が取得できない場合
}

画面幅の取得

そもそも論でいうと画面幅に依存したデザインをしないことが一番重要
CSSの進化でブレイクポイント＋メディアクエリを利用したレスポンシブも必要性が減ってきている。