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

تشخیص دستگاه‌های موبایل با استفاده از 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 قرار بدین و با توجه به شرایط مختلف کارهای متفاوتی رو انجام بدین
موفق باشید