ユーザエージェントによるデバイス検出

あなたは特定のプラットフォームやデバイスの機能を実装したいことがありますか?モバイルユーザーにのみ画面またはいくつかのコンテンツを表示したり、ユーザーのデバイスに基づいて別のアクションを実行するように
私は通常、デスクトップ上で閲覧しながら、モバイルユーザーのためだけに明確に意図されているサイト上のコンテンツに遭遇する.
ユーザエージェントはこのシナリオで役立つことができます.
MDN definesユーザエージェントAS

The User-Agent request header is a characteristic string that lets servers and network peers identify the application, operating system, vendor, and/or version of the requesting user agent.

ユーザエージェント文字列の一般的な書式は次のようになります.
Mozilla/5.0(<system-information>)<platform>(<platform-details>)<extensions>

ユーザのデバイスの検出

ユーザーが携帯電話上にあるかどうかを知るには、以下の例で見ることができます

const BUTTON = document.querySelector("button");

const { userAgent } = window.navigator;

// Set device to "mobile" if "Mobi" exists in userAgent else set device to "desktop"
const device = userAgent.includes("Mobi") ? "mobile 📱" : "desktop 💻";

BUTTON.addEventListener("click", () => alert(`You are on ${device}`));

上記の例は

デスクトップ

モバイルデモ

ブラウザでテスト

ブラウザでこれをテストするには、開発ツールを開き、「トグルデバイス」アイコンをクリックします.ページを更新する

実例

ここで私の反応アプリケーションでは、この実用的な例です.
私は連合のログインでこれを使用しました

// Context API for device
import { createContext, useEffect, useState } from "react";

export type TDevice = "mobile" | "desktop";

export const DeviceContext = createContext<TDevice>("mobile");

const DeviceContextProvider: React.FC = ({ children }) => {
  const [device, setDevice] = useState<TDevice>("mobile");

  useEffect(() => {
    const { userAgent } = navigator;
    // Set device state
    userAgent.includes("Mobi") ? setDevice("mobile") : setDevice("desktop");
  }, []);

  return (
    <DeviceContext.Provider value={device}>{children}</DeviceContext.Provider>
  );
};

export default DeviceContextProvider;

// login with provider hook
const useLoginWithProvider = (redirect: (path: string) => void) => {
  const device = useContext(DeviceContext);
  const [signInAttempt, setSignInAttempt] = useState(false);

  const login = async (provider: string) => {
    if (device === "mobile") { // Check if user is mobile
      firebase.auth().signInWithRedirect(providers[provider]);
      setSignInAttempt(true);
    } else {
      firebase
        .auth()
        .signInWithPopup(providers[provider])
        .then(handleResult)
        .catch(error => setError(error.message));
    }
  };

  useEffect(() => {
    if (signInAttempt) {
      firebase
        .auth()
        .getRedirectResult()
        .then(handleResult)
        .catch(error => setError(error.message));
    }
  }, []);

  return login;
};

export default useLoginWithProvider;

結論

明らかに、これはメディアクエリーに代わるものではないと言うことができますが、これは非常に有用です.メディアクエリは主に応答ページに使用されますが、このメソッドはデバイス固有の機能またはコンテンツです.これは主にあなたのモバイルアプリケーションをデスクトップのバージョンとは異なる動作するように便利です.
あなたは、特に進行中のWebアプリを扱うときの経験のようなモバイルユーザーアプリを与えるためにこれを使用することができます
Read more from MDN docs
Daniel KorpaiのUnsplashによる写真