Merhaba react ile yaptığım telegram botuna kullanıcının cihaz kontrolünü şu anda <b>react-device-detect</b> kütüphanesini kullanarak sağlıyorum. Fakat şöyle bir sorunum var.
Chrome Devtools'un <b>toggle device toolbar</b> özelliğinden mobil cihaz seçerek bunu manipüle edebiliyoruz çünkü bu özellik user-agent'ı değiştiriyor ve bildiğim kadarıyla kütüphane user-agent kullanarak kontrol sağlıyor. Sormak istediğim şey şu: daha düzgün bir cihaz kontrolü nasıl sağlarım? Kullanıcı gerçekten mobildeyse (yada tablet) uygulamaya erişmesini istiyorum.

DeviceCheck komponentim

import React from 'react';
import { isMobile } from 'react-device-detect';
import IntlManager from '../Providers/IntlManagerProvider';
import { FormattedMessage } from 'react-intl';
import { useLocale } from '../context/langContext';

const DeviceCheck = ({ children }) => {
  const { locale } = useLocale();

  if (!isMobile) {
    return (
      <IntlManager locale={locale}>
        <div className="w-full flex h-full justify-center px-5 items-center font-medium text-[20px]">
          <div className="w-full pt-24 text-center flex flex-col space-y-3 justify-center items-center">
            <p className="text-[28px] font-semibold">
              <FormattedMessage id="deviceCheck" />
            </p>
            <img
              src="/qr-code.svg"
              alt="qr-code"
              className="w-[250px] rounded-[25px] border-[2px] border-[#0000ff]"
            />
          </div>
        </div>
      </IntlManager>
    );
  }
  return <>{children}</>;
};

export default DeviceCheck;