چطور در ReactJS بفهمم که اپلیکیشن روی موبایل دیده میشه یا دسکتاپ؟

برای اینکه بتونی تشخیص بدی که اپلیکیشن ReactJS شما داره روی موبایل دیده میشه یا دسکتاپ، می‌تونی از ویژگی‌های مختلفی مثل window.innerWidth استفاده کنی. این ویژگی به شما عرض پنجره مرورگر رو میده و با توجه به اون می‌تونی تصمیم بگیری که کاربر از موبایل استفاده می‌کنه یا دسکتاپ.

یه راه ساده اینه که عرض پنجره رو چک کنی و اگه زیر یه مقدار خاص بود، بگی که این موبایله. مثلاً اگه عرض زیر ۷۶۸ پیکسل بود، می‌تونیم فرض کنیم کاربر روی موبایله:

const isMobile = window.innerWidth <= 768;
if (isMobile) {
    console.log("User is on a mobile device");
} else {
    console.log("User is on a desktop");
}

این کد خیلی ساده کار می‌کنه و به راحتی می‌تونی داخل کامپوننت‌ها یا جایی که نیاز داری ازش استفاده کنی. اما برای پروژه‌های بزرگتر و پیچیده‌تر، پیشنهاد می‌کنم از کتابخونه‌هایی مثل react-device-detect استفاده کنی که امکانات بیشتری رو در اختیارت قرار می‌ده.

نصب این کتابخونه هم خیلی راحته:

npm install react-device-detect --save

و بعدش می‌تونی به این شکل استفاده کنی:

import { isMobile } from "react-device-detect";
if (isMobile) {
    console.log("User is on a mobile device");
} else {
    console.log("User is on a desktop");
}