モバイルデバイスを検出するためのCSSの方法

1. メディアクエリを使用する方法: CSSのメディアクエリを使用すると、特定の画面サイズやデバイスの条件に基づいてスタイルを適用することができます。

   例:

   @media only screen and (max-width: 600px) {
    /* モバイルデバイス用のスタイル */
   }

   上記の例では、画面幅が600px以下の場合に、モバイルデバイス用のスタイルが適用されます。

2. CSSの@supportsルールを使用する方法: @supportsルールを使用すると、特定のCSSプロパティや機能がサポートされているかどうかを検出することができます。これを利用して、モバイルデバイス特有の機能を検出することができます。

   例:

   @supports (touch-action: none) {
    /* モバイルデバイス用のスタイル */
   }

   上記の例では、touch-actionプロパティがサポートされている場合に、モバイルデバイス用のスタイルが適用されます。

3. CSSのpointerメディアフィーチャーを使用する方法: pointerメディアフィーチャーを使用すると、デバイスのポインティングデバイス（タッチスクリーンなど）の有無を検出することができます。

   例:

   @media (pointer: coarse) {
    /* モバイルデバイス用のスタイル */
   }

   上記の例では、ポインティングデバイスが粗い（タッチスクリーンなど）場合に、モバイルデバイス用のスタイルが適用されます。

これらはいくつかの一般的なCSSの方法ですが、他にも様々な方法があります。具体的な要件や目的に応じて、適切な方法を選択してください。また、上記のコード例は一部の簡略化されたものであり、実際の使用には適切な条件やスタイルを追加する必要があります。