0
سبد خرید من 0 دوره
سبد خرید شما خالیست :(
پرسش

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

ReactJS: How to determine if the application is being viewed on mobile or desktop browser

من دارم یک اپلیکیشن با ReactJS توسعه می‌دم و می‌خوام بدونم چطور می‌تونم تشخیص بدم که اپلیکیشنم داره روی موبایل دیده میشه یا دسکتاپ. چطوری می‌تونم این کار رو انجام بدم؟

1403/06/06
پاسخ
محمدامین سعیدی راد
بیوگرافی محمدامین سعیدی راد

برای اینکه بتونی تشخیص بدی که اپلیکیشن 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");
}

این روش خیلی دقیق‌تره و می‌تونه اطلاعات بیشتری در مورد دستگاه کاربر بهت بده. امیدوارم که این راهکار به کارت بیاد و بتونی به خوبی ازش استفاده کنی!

پاسخ: 1403/06/06
آخرین آپدیت: 1403/08/15