تشخیص دستگاه های موبایل با استفاده از Javascript

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۳۰ خرداد ۱۳۹۷

تشخیص دستگاه‌های موبایل با استفاده از Javascriptدر این مطلب می‌خوام روشی رو بهتون معرفی کنم  که به کمک اون می‌تونید متوجه بشید که آیا کاربر شما داره از موبایل استفاده می‌کنه یا خیر.

با استفاده از فهمیدن این مورد میتونین کارهای مختلفی رو انجام بدین و در دستگاه‌های مختلف کارهای متفاوتی رو انجام بدین. مثلا میتونین در دستگاه موبایل فوتر رو نشون ندید و یا بخشی رو اضافه یا کم کنید و یا استایلهای متفاوتی رو اعمال کنید.

به کمک کد Javascript زیر می‌تونید متوجه بشید که کاربر سایت شما از موبایل استفاده می‌کنه یا نه :

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

در کد زیر نسخه کامل‌تری رو می‌تونید ببینید:

var isMobile = false; //initiate as false// device detectionif(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)     || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {     isMobile = true;}

اگر به صورت اختصاصی‌تر بخوایم وجود یا عدم وجود موبایل رو بررسی کنیم دو کد زیر رو بهتون معرفی می‌کنم که به وسیله این دو کد می‌تونید کاربرهایی رو که با سیستم اندروید هستند یا از iPhone استفاده می‌کنند رو به صورت جداگانه تشخیص بدید.

برای تشخیص اندروید کد زیر رو ببینید:

var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());

if (isAndroid) {
  // Some code for android devices
}

برای تشخیص iPhone می‌تونید از کد زیر استفاده کنید:

var isiPhone = /iphone/i.test(navigator.userAgent.toLowerCase());
if (isiPhone) {
  // Some code for iPhone devices
}

اگر شما هم روشی برای انجام اینکار به ذهنتون میرسه خوشحال میشیم که در بخش نظرات با ما در میان بذارید.

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

Σιγμα

سلام خسته نباشید
خواستم بپرسم اگه سیستم مورد نظر ویندوز بود چی بنویسم
windows یا desktop ؟

نگار مرادی

با تشکر از مطلب مفید شما

Mahmood Dabestani

سلام بر شما
خیلی ممنونم بابت این آموزش.
این آدرس سایت بنده است
https://www.arize.ir
جسارتا میشه راهنمایی بفرمایید که بنده این کد ها رو کجای سایتم باید قرار بدم تا بتونم دستوری که میخوام رو نمایش بده؟؟؟

محمد اسفندیاری

بستگی داره که بخواید چه کاری رو انجام بدین….مثلا اگر از jQuery استفاده میکنید میتونین در document.ready قرار بدین و با توجه به شرایط مختلف کارهای متفاوتی رو انجام بدین
موفق باشید

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :