تشخیص موبایل با jquery

نحوه تشخیص دستگاه تلفن همراه با استفاده از jQuery

آنچه که در این مقاله خواهید خواند:

سوال:

آیا راهی برای تشخیص اینکه آیا کاربر از دستگاه تلفن همراه در جی کوئری استفاده می کند یا خیر وجود دارد؟ چیزی شبیه به ویژگی @media در CSS؟ اگر مرورگر روی دستگاه دستی باشد، می‌خواهم اسکریپت دیگری را اجرا کنم.

تابع jQuery $.browser چیزی نیست که من به دنبالش هستم.

پاسخ:

به جای استفاده از jQuery می توانید از جاوا اسکریپت ساده برای شناسایی آن استفاده کنید:

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

یا می توانید هر دو را با هم ترکیب کنید تا از طریق jQuery در دسترس تر باشد

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

اکنون $.browser برای همه دستگاه های فوق “device” باز خواهد گشت

توجه: $.browser در jQuery v1.9.1 حذف شده است. اما می توانید با استفاده از کد افزونه مهاجرت جی کوئری از این مورد استفاده کنید

نسخه کامل تر:

var isMobile = false; //initiate as false
// device detection
if(/(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;
}

برای درک بهتر ساختار زبان جاوا اسکریپت و وارد شدن به بازارکار می توانید از مسیر کارآموزی فرانت اند استفاده کنید.

پاسخ‌ها

آدرس ایمیل شما منتشر نخواهد شد.

پل ورود به بازار تکنولوژی

مشاوره رایگان انتخاب مسیر

با کمک مشاورهای رستاوا آکادمی مسیر کارآموزی مناسب برای خودت رو برای ورود به بازار کار تکنولوژی انتخاب کن

توسعه فردی برای حرفه‌ای شدن

منتورهای رستاوا و دوره‌های ما شما رو برای کارآموزی و در نهایت جذب و استخدام آماده میکنن

مدرک بین المللی و استانداردهای جهانی

یادگیری با استاندار های بین المللی و دریافت مدرک از Credx Academy کانادا

اگر در مسیرهای کارآموزی ما پذیرش بگیری موقعیت‌های کارآموزی و استخدام در پروژه‌ها و شرکت های بین المللی از طریق مجموعه رستاوا به روت باز می شه.

۲ هفته رایگان

همین حالا با منتورها

ارتباط آنی بگیر!