মোবাইল ডিভাইস সনাক্ত করার সর্বোত্তম উপায় কী?


1651

কোনও ব্যবহারকারী jQuery এ একটি মোবাইল ডিভাইস ব্যবহার করছে কিনা তা সনাক্ত করার কোনও শক্ত উপায় আছে কি? সিএসএস @ মিডিয়া অ্যাট্রিবিউট এর অনুরূপ কিছু? ব্রাউজারটি যদি হ্যান্ডহেল্ড ডিভাইসে থাকে তবে আমি একটি আলাদা স্ক্রিপ্ট চালাতে চাই।

JQuery $.browserফাংশনটি আমি যা খুঁজছি তা নয়।


7
মোবাইল ডিভাইসের জন্য বিশেষত একটি মোবাইল URL সরবরাহ করুন। বেশিরভাগ প্রধান সাইটগুলি মোবাইল ডিভাইসগুলি এভাবে পরিচালনা করে। M.google.com দেখুন ।
মেগার

6
jQuery সব কিছু করে না এবং করতে পারে না। এটি ব্রাউজারগুলির মধ্যে ক্রস-ব্রাউজার ডিওএম ট্রভারসাল এবং ম্যানিপুলেশন, সাধারণ অ্যানিমেশন এবং এজাক্স সরবরাহ করে এবং প্লাগিনগুলি তৈরির জন্য একটি কঙ্কাল কাঠামো তৈরি করে। দয়া করে জিজ্ঞাসা সামনে jQuery এর সীমাবদ্ধতা সচেতন হতে বিশেষভাবে একটি jQuery সমাধান জন্য।
ইয়ি জিয়াং

78
ব্যবহারকারী এজেন্ট প্রতিনিয়ত লক্ষ্যবস্তু নিয়ে চলেছে, এই পোস্টটি পড়া প্রত্যেকেরই ব্যবহারকারীর এজেন্ট স্নিফিংয়ের বিষয়ে খুব সতর্ক হওয়া উচিত
রব

46
একটি 'মোবাইল' ডিভাইস কি? এটি কি এমন কোনও ডিভাইস যা স্পর্শকে সমর্থন করে (ক্রোম পিক্সেল এবং ইঁদুরগুলির সাথে উইন্ডোজ 8 ল্যাপটপ সহ)? এটি একটি ছোট পর্দা সহ একটি ডিভাইস (রেটিনা আইপ্যাডগুলি সম্পর্কে কী)? এটি কি ধীর সিপিইউ সহ একটি ডিভাইস? বা একটি ধীর ইন্টারনেট সংযোগ সহ একটি ডিভাইস? এই প্রশ্নের উত্তর আপনি কী করতে চান তার উপর নির্ভর করে পৃথক হবে। স্ক্রিন রেজোলিউশনকে লক্ষ্য করা বা স্পর্শ করা সহজ। আপনি যদি কিছু ডিভাইসের জন্য ছোট সামগ্রী বা কম নিবিড় জেএস পরিবেশন করতে চান তবে সিলভার বুলেট নেই। উইন্ডো.নভিগেটর.কমের সংযোগের জন্য পরীক্ষা করুন এবং পিছনে পড়ুন (দুষ্ট, খারাপ, খারাপ পরামর্শ দেওয়া) ব্যবহারকারী এজেন্ট স্নিফিং। আমার 2 সেন্ট।
ডেভিড গিলবার্টসন

3
@ কোল "কোলে 9" জনসন আমার বিষয়টি ঠিক বলেছেন। 'মোবাইল' স্পর্শ, ধীর সিপিইউ, ধীর নেটওয়ার্ক এবং ছোট পর্দার জন্য একটি ছাতা শব্দ হিসাবে ব্যবহৃত হবে বলে মনে হয়। তবে এগুলির কোনওটিই নিখুঁত অনুমান নয়। আমি বিশ্বাস করি যে এগুলি স্বতন্ত্রভাবে বিবেচনা করলে 'মোবাইল' এর কিছু অস্পষ্ট ধারণার জন্য ডিজাইনিং করার চেয়ে ভাল পণ্য পাওয়া যাবে। অতএব আমি ওপিতে এই প্রশ্নটি পোষ্ট করছি।
ডেভিড গিলবার্টসন

উত্তর:


2027

সম্পাদকের দ্রষ্টব্য: ব্যবহারকারী ওয়েব এজেন্ট সনাক্তকরণ আধুনিক ওয়েব অ্যাপ্লিকেশনগুলির জন্য প্রস্তাবিত কৌশল নয়। এই সত্যের নিশ্চয়তার জন্য এই উত্তরের নীচের মন্তব্যগুলি দেখুন। বৈশিষ্ট্য সনাক্তকরণ এবং / অথবা মিডিয়া ক্যোয়ারী ব্যবহার করে অন্য উত্তরগুলির মধ্যে একটি ব্যবহার করার পরামর্শ দেওয়া হচ্ছে।


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"

দ্রষ্টব্য: jQuery v1.9.1 এ$.browser সরানো হয়েছে । তবে আপনি jQuery মাইগ্রেশন প্লাগইন কোড ব্যবহার করে এটি ব্যবহার করতে পারেন


আরও বিশদ সংস্করণ:

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;
}

438
ব্যবহারকারী এজেন্ট স্নিফিং একটি খুব নোড সনাক্তকরণ কৌশল, ব্যবহারকারী এজেন্ট স্ট্রিংগুলি একটি ধ্রুবক চলমান লক্ষ্য, তাদের একা বিশ্বাস করা উচিত নয়। এই পোস্টে আপ-ভোটিং করা লোকদের আরও গবেষণা করা বিবেচনা করা উচিত।
রব

65
ব্যবহারকারীর এজেন্টের বাইরে সুনির্দিষ্ট ডিভাইসগুলির জন্য স্নিফিংয়ের অন্যতম সমস্যা হ'ল নতুন ডিভাইসগুলি বের হওয়ার সময় আপনার সনাক্তকরণ আপডেট করতে হবে। এটি একটি আদর্শ সমাধান নয়।
আইসিডফোর্ডকফি

11
অ্যান্ড্রয়েডে ডলফিন ব্রাউজার সেই স্ট্রিংগুলির কোনওটিই প্রেরণ করে না!
ফিয়েল

87
যদি আপনার ব্যবহারকারী যথেষ্ট বুদ্ধিমান বা ডেভেলপাররা ব্যবহারকারী এজেন্ট স্ট্রিং পরিবর্তন করতে যথেষ্ট বোকা হন, তবে তাদের কে যত্ন করে ...
ম্যাটডলকায়ার

58
তাহলে কীভাবে মোবাইল আপনি মাউস সহ একটি অ্যান্ড্রয়েড টিভি বিবেচনা করবেন? উইন্ডোজ পিসি কীভাবে মোবাইল যা দ্বৈত মোডে চলতে পারে (কীবোর্ড সহ, বা টাচ স্ক্রিন হিসাবে)? আপনি যদি আইপ্যাড আবিষ্কারের আগে এটি করেন, তবে আপনাকে পরে এটি আপনার সমস্ত সাইটে যুক্ত করতে হবে। পরবর্তী ওএসগুলি বের হচ্ছে: উবুন্টু মোবাইল, ফায়ারফক্স, টিজেন ....This.Is.A.Bad.Idea.
ফ্রান্সেসকো

534

আমার জন্য ছোট সুন্দর তাই আমি এই কৌশলটি ব্যবহার করছি:

সিএসএস ফাইলে:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

JQuery / জাভাস্ক্রিপ্ট ফাইলটিতে:

$( document ).ready(function() {      
    var is_mobile = false;

    if( $('#some-element').css('display')=='none') {
        is_mobile = true;       
    }

    // now i can use is_mobile to run javascript conditionally

    if (is_mobile == true) {
        //Conditional script here
    }
 });

আমার উদ্দেশ্য ছিল আমার সাইটের "মোবাইল বান্ধব" হওয়া। সুতরাং আমি সিএসএস মিডিয়া ক্যোয়ারীগুলি স্ক্রিনের আকারের উপর নির্ভর করে উপাদানগুলি প্রদর্শন / গোপন করতে ব্যবহার করি।

উদাহরণস্বরূপ, আমার মোবাইল সংস্করণে আমি ফেসবুকের মতো বাক্স সক্রিয় করতে চাই না, কারণ এটি সেই সমস্ত প্রোফাইল চিত্র এবং স্টাফ লোড করে দেয়। এবং এটি মোবাইল দর্শকদের পক্ষে ভাল নয়। সুতরাং, ধারক উপাদানটি আড়াল করার পাশাপাশি, আমি jQuery কোড ব্লকের ভিতরে (উপরে) এটিও করি:

if(!is_mobile) {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

আপনি এটি http://lisboaautentica.com এ কর্মে দেখতে পাবেন

আমি এখনও মোবাইল সংস্করণে কাজ করছি, সুতরাং এটি লেখার মতো এখনও এটি দেখতে পাচ্ছে না।

Dekin88 দ্বারা আপডেট

মিডিয়া সনাক্ত করার জন্য একটি জাভাস্ক্রিপ্ট এপিআই রয়েছে। উপরের সমাধানটি ব্যবহার না করে কেবল নিম্নলিখিতটি ব্যবহার করুন:

$(function() {      
    let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (isMobile) {
        //Conditional script here
    }
 });

ব্রাউজার সমর্থন করে: http://caniuse.com/#feat=matchmedia

এই পদ্ধতির সুবিধাটি হ'ল এটি কেবল সহজ এবং খাটো নয়, আপনি ডিএমএমে কোনও ডামি উপাদান যুক্ত না করে শর্তাধীন বিভিন্ন ডিভাইস যেমন স্মার্টফোন এবং ট্যাবলেটগুলি আলাদাভাবে লক্ষ্যবস্তু করতে পারেন।


8
এটি কাজ করার জন্য আপনার ডমটিতে সত্যিকারের # কিছু উপাদান প্রয়োজন নেই?
রাইমার

68
-1 screen.widthসম্পত্তিটি বিশ্বব্যাপী। ডিওমে ইচ্ছামত কোনও উপাদান যুক্ত করার দরকার নেই এবং অযথা CSS CSS মিডিয়া কোয়েরি আনতে হবে না। এছাড়াও, যদি ব্রাউজারটি কোনও ডেস্কটপে থাকে এবং ব্যবহারকারী উইন্ডোটির আকার পরিবর্তন করে, $is_mobileআপডেট করা হবে না।
মার্ভ

98
কেন নয়:if( screen.width <= 480 ) { // is mobile }
অ্যান্ড্রুজোনস 20'13

23
@ অ্যান্ড্রুজারজোনস রেটিনা ডিভাইসগুলি আইআরসি থেকে গুণমানের দ্বিগুণ width। সুতরাং, একটি অক্ষিপট আইফোন একটি থাকবে widthএর 640এবং উচ্চতা 960প্রতিকৃতি, এবং একটি widthএর 960এবং উচ্চতা 640আড়াআড়ি মধ্যে।
কোল জনসন

66
আপনি সবেমাত্র পুনর্নবীকরণ করেছেন window.matchMedia: বিকাশকারী.মোজিলা.আর.ইন-
পল আইরিশ ২

236

মজিলা অনুসারে - ব্যবহারকারী এজেন্ট ব্যবহার করে ব্রাউজার সনাক্তকরণ :

সংক্ষেপে, আমরা কোনও মোবাইল ডিভাইস সনাক্ত করতে ব্যবহারকারী এজেন্টের যে কোনও জায়গায় "মোবি" স্ট্রিংটি অনুসন্ধান করার পরামর্শ দিই।

এটার মত:

if (/Mobi/.test(navigator.userAgent)) {
    // mobile!
}

এটি মোবাইল মোজিলা, সাফারি, আইই, অপেরা, ক্রোম ইত্যাদি সহ সমস্ত সাধারণ মোবাইল ব্রাউজার ব্যবহারকারী এজেন্টগুলির সাথে মিলবে

অ্যান্ড্রয়েডের জন্য আপডেট

এরিকএল Androidব্যবহারকারী এজেন্ট হিসাবেও পরীক্ষার পরামর্শ দেয়, যেহেতু ট্যাবলেটগুলির জন্য ক্রোম ব্যবহারকারী এজেন্ট স্ট্রিংটিতে "মবি" অন্তর্ভুক্ত থাকে না (তবে ফোন সংস্করণগুলি করা হয়):

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}

11
উত্তরের জন্য ধন্যবাদ! /Mobi/i.test(navigator.userAgent)যদিও আমি পছন্দ করি , পরীক্ষার হিসাবে () এটি একটি বুলিয়ান দেয়।
আর্মিনরোসু

5
প্যারাডক্সিকভাবে ফায়ারফক্স মোবাইল স্যামসুং গ্যালাক্সি নোট 8-এ মবি ফিরিয়ে দেয় না এবং পরীক্ষাটি মিথ্যা ফিরে আসবে।
ইরিন

13
লিঙ্কযুক্ত নিবন্ধে উল্লেখ করা হয়েছে: ডিভাইসটি যদি এত বড় হয় যে এটি "মবি" হিসাবে চিহ্নিত করা হয়নি তবে আপনার ডেস্কটপ সাইটটি পরিবেশন করা উচিত (যা সর্বোত্তম অনুশীলন হিসাবে, যে কোনও উপায়ে স্পর্শ ইনপুট সমর্থন করা উচিত, যেহেতু আরও ডেস্কটপ মেশিনগুলি টাচস্ক্রিনের সাথে প্রদর্শিত হচ্ছে)।
কাসারডনকি

2
এটি অন্যান্য প্রস্তাবিত সমাধানগুলির চেয়ে অনেক ভাল, এটি গ্রহণযোগ্য উত্তর ইমো হওয়া উচিত
RNobel

9
Derp। ধন্যবাদ। আমি আমার আগের পোস্টটি সম্পাদনা করতে পারিনি। এখানে এটি আবার:/Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent)
এরিকল

90

একটি সহজ এবং কার্যকর ওয়ান-লাইনার:

function isMobile() { return ('ontouchstart' in document.documentElement); }

তবে উপরের কোডটি টাচস্ক্রিনযুক্ত ল্যাপটপের ক্ষেত্রে কেসটিকে বিবেচনা করে না। সুতরাং, আমি @ জুলিয়ান সমাধানের উপর ভিত্তি করে এই দ্বিতীয় সংস্করণটি সরবরাহ করি :

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}

29
টাচ স্ক্রিনযুক্ত উইন্ডোজ ল্যাপটপগুলির কী হবে?
ক্রিস সিনেলি

10
দ্বিতীয় isMobileফাংশনটি আপনি trueআমার ডেসটপ ডিভাইসে রিটার্ন সরবরাহ করেছেন !! (গুগল ক্রোম ভি 44.0)
লুক

12
এটি সত্যিকারের মোবাইল সনাক্তকরণ নয়, এমন আরও একটি টুচ সমর্থনযোগ্য পদ্ধতি।
বার্কর্ম্ন 01

3
সমস্ত মোবাইল ফোনে টাচ স্ক্রিন থাকে না।
অ্যান্ড্রু

@ লুকাক মোবাইল এমুলেশন থেকে ডেস্কটপে যাওয়ার সময় আপনি কি সতেজতা বোধ করছেন?
খ্রিস্টান

81

একটি মোবাইল ডিভাইস সনাক্ত করতে চাইলে আপনি যা করছেন তা একটি "ব্রাউজার স্নিফিং" ধারণা আইএমওটির খুব কাছে চলেছে। কিছু বৈশিষ্ট্য সনাক্তকরণ সম্ভবত এটি আরও ভাল হবে। Http://www.modernizr.com/ এর মতো লাইব্রেরি এতে সহায়তা করতে পারে।

উদাহরণস্বরূপ, মোবাইল এবং নন-মোবাইলের মধ্যে লাইনটি কোথায়? এটি প্রতিদিন আরও বেশি ঝাপসা হয়ে যায়।


3
তবুও, কোনও ব্যবহারকারী সমর্থিত বৈশিষ্ট্যগুলি যেমনই হোক না কেন, সেই ডিভাইসগুলির জন্য "jquery মোবাইল" ব্যবহার করতে পারে।
স্যারবার

9
উদাহরণস্বরূপ, "মোবাইল" "নন-মোবাইল" সহ আমার সমস্যাটি আমার রোলওভার বৈশিষ্ট্য, বৈশিষ্ট্যগুলি বন্ধ করার জন্য আমার কাছে জেএস প্রস্তুত রয়েছে, কেবল সনাক্ত করা দরকার
স্যাম সুসমান

4
তবুও, আপনি যদি কোনও ডিভাইস-নির্দিষ্ট ডাউনলোডযোগ্য অ্যাপ্লিকেশন দিতে চান তবে এটি কার্যকর হতে পারে।
বাস্তে

3
এটি পরিস্থিতির উপর নির্ভর করে, আমি এমন কিছু সন্ধান করছি যা ব্যবহারকারীর মোবাইল ডিভাইসে রয়েছে কিনা তা আমাকে বলবে, যাতে আমি কিছু ভারী জাভাস্ক্রিপ্ট ভিত্তিক অ্যানিমেশন অক্ষম করতে পারি। ব্যবহারকারীর ব্রাউজারের জাভাস্ক্রিপ্ট কর্মক্ষমতা ক্ষমতা সনাক্ত করতে চেষ্টা করার চেয়ে ইউএ স্নিফিং অনেক বেশি উপযুক্ত
রিক সুগস

9
মোবাইল বনাম অ-মোবাইল একটি খুব বড় পার্থক্য, আপনি যখন কোনও মোবাইল / ডেস্কটপের অভিজ্ঞতার জন্য ইন্টারঅ্যাকশন / ইউআই পূরণ করার চেষ্টা করছেন তখন কেবল "বৈশিষ্ট্য সনাক্তকরণ" ব্যবহার করা বোকা। ব্যক্তিগতভাবে, আমি চাই যে বর্তমান ব্রাউজারটি যে ওএসটি চালু রয়েছে তার পাওয়ার একটি সহজ (এবং নির্ভরযোগ্য) উপায় ছিল
nbsp

66

এটি jQuery নয়, তবে আমি এটি খুঁজে পেয়েছি: http://detectmobilebrowser.com/

এটি বেশ কয়েকটি ভাষায় মোবাইল ব্রাউজারগুলি সনাক্ত করতে স্ক্রিপ্ট সরবরাহ করে যার মধ্যে একটি জাভাস্ক্রিপ্ট। আপনি যা সন্ধান করছেন তাতে এটি আপনাকে সহায়তা করতে পারে।

তবে আপনি যেহেতু jQuery ব্যবহার করছেন তাই আপনি jQuery.support সংগ্রহ সম্পর্কে সচেতন হতে চাইতে পারেন। এটি বর্তমান ব্রাউজারের ক্ষমতা সনাক্তকরণের জন্য বৈশিষ্ট্যের সংগ্রহ। ডকুমেন্টেশন এখানে: http://api.jquery.com/jQuery.support/

যেহেতু আপনি ঠিক কী অর্জন করতে চাইছেন তা আমি জানি না, তবে এর মধ্যে কোনটি সবচেয়ে কার্যকর হবে তা আমি জানি না।

যা যা বলা হচ্ছে, আমার কাছে মনে হয় আপনার সেরা বেটটি হয় সার্ভার-সাইডের ভাষা ব্যবহার করে আউটপুটটিতে পুনর্নির্দেশ করা বা আলাদা স্ক্রিপ্ট লেখা (যদি এটি কোনও বিকল্প হয়)। আপনি যেহেতু মোবাইল ব্রাউজার এক্স এর ক্ষমতাগুলি সত্যই জানেন না, এটি সনাক্তকরণ এবং সার্ভারের দিকের পরিবর্তন যুক্তিই সবচেয়ে নির্ভরযোগ্য পদ্ধতি হবে। অবশ্যই আপনি যদি কোনও সার্ভার সাইড ল্যাঙ্গুয়েজ ব্যবহার করতে না পারেন তবে সেগুলিই একটি মিট পয়েন্ট :)


6
যা আইপ্যাডগুলিকে সমর্থন করে না। আইপ্যাড সমর্থন করতে, আইপি (হোন | ওড) এবং "| বিজ্ঞাপন" - যেমন আইপি (হোন | ওড | বিজ্ঞাপন) সন্ধান করুন
জয়সন রাগাসা

3
আমি সবেমাত্র জাভাস্ক্রিপ্টটি ডিটেক্টমোবাইলব্রোসর.com/ থেকে চেষ্টা করেছি এবং আইপ্যাডের জন্য এটি কাজ করছে না।
মিলচে প্যাটার্ন

3
@ মিলচেপ্যাটারন কারণ স্ক্রিপ্টটি ত্রুটিযুক্ত, আইপ্যাডের পরিবর্তে আইপ্যাড ব্যবহার করুন, এটি কাজ করে, আমার স্যামসাং ট্যাবে সমস্যা ছিল, অ্যান্ড্রয়েড আইসো অ্যান্ড্রয়েড ব্যবহার করতে হয়েছিল :)
কোএন ডামেন

13
সেখানে একটি jQuery সংস্করণ রয়েছে, এবং এটি পুরোপুরি কাজ করে, তবে ট্যাবলেট সনাক্তকরণের জন্য আপনাকে অবশ্যই বিভাগের (এটি নকশা অনুসারে) |android|ipad|playbook|silkবর্ণিত হিসাবে যুক্ত করতে হবে
cprcrack

3
হ্যাঁ, একটি ট্যাবলেট মোবাইল নয়। সাইটটিকে ডিকটেক্ট মোবাইল ব্রাউজার বলা হয় ।
ফেলিক্স ইভ

47

আইফোন স্টোর বা অ্যান্ড্রয়েড মার্কেটের লিঙ্কের মতো কোনও ডিভাইসের সাথে সম্পর্কিত বিষয়বস্তু প্রদর্শনের জন্য কোনও ক্লায়েন্ট কোন ব্র্যান্ডের ডিভাইসটি ব্যবহার করছে তা কখনও কখনও জানতে আগ্রহী হয়। মডার্নাইজার দুর্দান্ত, তবে কেবল আপনাকে HTML5 বা ফ্ল্যাশের মতো ব্রাউজারের ক্ষমতা দেখায়।

প্রতিটি ডিভাইসের ধরণের জন্য আলাদা শ্রেণি প্রদর্শন করতে jQuery এ আমার ইউজার এজেন্ট সমাধানটি এখানে দেওয়া হয়েছে:

/*** sniff the UA of the client and show hidden div's for that device ***/
var customizeForDevice = function(){
    var ua = navigator.userAgent;
    var checker = {
      iphone: ua.match(/(iPhone|iPod|iPad)/),
      blackberry: ua.match(/BlackBerry/),
      android: ua.match(/Android/)
    };
    if (checker.android){
        $('.android-only').show();
    }
    else if (checker.iphone){
        $('.idevice-only').show();
    }
    else if (checker.blackberry){
        $('.berry-only').show();
    }
    else {
        $('.unknown-device').show();
    }
}

এই সমাধানটি গ্রাফিক্স ম্যানিয়াকস থেকে রয়েছে http://gigicaniacs.com/note/detecting- iPhone-ipod-ipad-android-and-blackberry-browser-with- জাভাস্ক্রিপ্ট- এবং- php/


এটি দুর্দান্ত কাজ করে। আইপ্যাড বা অ্যান্ড্রয়েড ফোন ব্যবহার করার সময় স্ক্রোলিংয়ে চলে এমন একটি জিকুয়েরি ফাংশনটি অক্ষম করার দরকার ছিল এবং যেহেতু বিভিন্ন ডিভাইসের স্ক্রিনের প্রস্থের ভিন্নতা রয়েছে, এটি ছিল একটি সহজ সমাধান। অসংখ্য ধন্যবাদ.
এরিক অ্যালেন

অ্যান্ড্রয়েডের পরীক্ষাটি ব্যবহারের ক্ষেত্রে একমাত্র সমস্যা
হ'ল নোকটি

দুর্দান্ত উত্তর যা দেখায় যে আমাদের বৈশিষ্ট্য সনাক্তকরণের মৌলবাদী হতে হবে না।
ফার্নান্দো

44

এতে একটি সমাধান খুঁজে পেয়েছে: http : //www.abe beautysite.net/blog/2011/11/detecting-momot-devices-with- javascript/

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

এবং তারপরে এটি মোবাইল কিনা তা যাচাই করতে আপনি পরীক্ষা করে পরীক্ষা করতে পারেন:

if(isMobile.any()) {
   //some code...
}

ব্যবহারকারী এজেন্ট ভিত্তিক একটি সমাধান ভাল কাজ করে যখন আপনি আত্মবিশ্বাসী হতে পারেন সাব স্ট্রিংটি সরাসরি ডিভাইসের ধরণের সাথে সম্পর্কিত। অর্থাত্ আইপ্যাড = আইপ্যাড। তবে এখন অনেকগুলি বিভিন্ন ধরণের ডিভাইস রয়েছে (25,000 এরও বেশি) যে বেশিরভাগ ব্যবসায়ের উদ্দেশ্যে এ পদ্ধতিটি যথেষ্ট সঠিক নয়। আমি একটি নির্ভরযোগ্য এবং শক্তিশালী বিকল্প সরবরাহ করতে ওপেন সোর্স প্রকল্প 51 ডিগ্রি ডটকম প্রতিষ্ঠা করেছি । এটি জাভাস্ক্রিপ্ট এবং সার্ভার সাইডেও কাজ করবে। সমস্ত ডকুমেন্টেশন এখানে ... 51degree.com/support/docamentation
জেমস রোজওয়েল

আমি উপরে পাশাপাশি ব্যবহার করেছি, এবং এটি আমার পক্ষে ভাল কাজ করছিল, তবে এখন এটি অ্যান্ড্রয়েড 5.1 এবং তারপরের জন্য কাজ করছে না, অ্যান্ড্রয়েড 5.1 এবং তার চেয়েও বড় কিছু আছে কি?
ইমরান কামার

যদি (isMobile.Android ()) {document.getElementById ("myAncor") set সেট অ্যাট্রিবিউট ("href", " google.com" ); }
আমরণুর রহমান

25

যদি "মোবাইল" দ্বারা আপনার বোঝানো হয় "ছোট স্ক্রিন," আমি এটি ব্যবহার করি:

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

আইফোনটিতে আপনার উইন্ডো.স্ক্রিন.উইথথ 320 শেষ হবে Android আইপ্যাড এবং অ্যান্ড্রয়েড ট্যাবলেটগুলি 768 এর মতো নম্বরগুলি ফিরিয়ে দেবে যাতে তারা আপনি চাইলে পুরো দর্শন পাবেন।


1
কেন 'উইন্ডোজ.স্ক্রিন.উইথথ' যথেষ্ট নয়? দেখে মনে হচ্ছে আপনি 'উইন্ডোজ.স্ক্রিন.উইথথ' বা 'উইন্ডো.উটারউইদথ' এর মধ্যে ছোটটি নিচ্ছেন। আপনি কেন 'বহির্মুখী' সম্পর্কে যত্নশীল? উত্তরের জন্য অগ্রিম ধন্যবাদ!
ব্যবহারকারী 1330974

16

আপনি যদি মডার্নজার ব্যবহার করেন তবে এটি Modernizr.touchপূর্বে উল্লিখিত হিসাবে ব্যবহার করা খুব সহজ ।

তবে, আমি Modernizr.touchনিরাপদ থাকার জন্য এবং ব্যবহারকারীর এজেন্ট পরীক্ষার সংমিশ্রণটি ব্যবহার করতে পছন্দ করি ।

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

আপনি যদি মডার্নিজার ব্যবহার না করেন তবে Modernizr.touchউপরের ফাংশনটি কেবল সাথে প্রতিস্থাপন করতে পারেন('ontouchstart' in document.documentElement)

এছাড়াও নোট করুন যে ব্যবহারকারী এজেন্টের পরীক্ষা করা iemobileআপনাকে সনাক্ত করা মাইক্রোসফ্ট মোবাইল ডিভাইসের বিস্তৃত পরিসর দেয় Windows Phone

এই এসও প্রশ্নটি দেখুন


আর ডার্ট একই: TouchEvent.supported
কাই সেলগ্রেন 11

('ontouchstart' in window)একটি বিকল্প Modernizr.touch, খুব, hacks.mozilla.org/2013/04/...
JVE999

আমি মনে করি মডার্নিজার একটি দুর্দান্ত সমাধান!
ববি রাসেল

আপনার |অনেক ম্যাচের পরিবর্তে সত্যই RegEx ব্যবহার করা উচিত । আপনারও দরকার নেই toLowerCase()কারণ আপনার iমডিফায়ার রয়েছে। এখানে: var isTouchDevice = Modernizr.touch || /iphone|ipod|ipad|android|iemobile|iphone|ipad|ipod|blackberry|bada/i.test(navigator.userAgent);
অরিয়াদাম

14

আপনি নির্ভর করতে পারবেন না navigator.userAgent, প্রতিটি ডিভাইসই এর আসল ওএস প্রকাশ করে না। উদাহরণস্বরূপ আমার এইচটিসি-তে এটি সেটিংসের উপর নির্ভর করে ("মোবাইল সংস্করণ ব্যবহার করছে" চালু / বন্ধ)। উপর http://my.clockodo.com , কেবলমাত্র আমরা ব্যবহৃত screen.widthছোট ডিভাইসগুলিকে সনাক্ত করার জন্য। দুর্ভাগ্যক্রমে, কিছু অ্যান্ড্রয়েড সংস্করণে স্ক্রিন.উইথথ সহ একটি বাগ রয়েছে। আপনি এইভাবে ব্যবহারকারী এজেন্টের সাথে একত্রিত করতে পারেন:

if(screen.width < 500 ||
 navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
}

8
অনেকগুলি মোবাইলের প্রস্থ> 1000 থাকে, বিশেষত ল্যান্ডস্কেপ মোডে
অরিয়াদাম

14

আমি জানি এই প্রশ্নটির অনেক উত্তর রয়েছে তবে আমি যা দেখেছি তা থেকে যেভাবে আমি এই সমস্যার সমাধান করব তার উত্তরটির কাছে পৌঁছায় না।

সিএসএস প্রস্থ ভিত্তিক ওয়েব ডকুমেন্টে কোন স্টাইল প্রয়োগ করে তা নির্ধারণ করতে প্রস্থ (মিডিয়া ক্যোয়ারী) ব্যবহার করে। জাভাস্ক্রিপ্টে প্রস্থটি ব্যবহার করবেন না কেন?

উদাহরণস্বরূপ বুটস্ট্র্যাপের (মোবাইল প্রথম) মিডিয়া ক্যোয়ারীগুলিতে 4 টি স্ন্যাপ / ব্রেক ব্রেক রয়েছে:

  • অতিরিক্ত ছোট ডিভাইসগুলি 768 পিক্সেল এবং এরও কম।
  • ছোট ডিভাইসগুলি 768 থেকে 991 পিক্সেল পর্যন্ত হয়।
  • মাঝারি ডিভাইসগুলি 992 থেকে 1199 পিক্সেল পর্যন্ত হয়।
  • বড় ডিভাইসগুলি 1200 পিক্সেল এবং তার বেশি।

আমরা আমাদের জাভাস্ক্রিপ্ট সমস্যাটিও সমাধান করতে এটি ব্যবহার করতে পারি।

প্রথমে আমরা একটি ফাংশন তৈরি করব যা উইন্ডোর আকার পায় এবং একটি মান ফেরত দেয় যা আমাদের অ্যাপ্লিকেশনটি কী আকারের ডিভাইসটি দেখছে তা দেখতে দেয়:

var getBrowserWidth = function(){
    if(window.innerWidth < 768){
        // Extra Small Device
        return "xs";
    } else if(window.innerWidth < 991){
        // Small Device
        return "sm"
    } else if(window.innerWidth < 1199){
        // Medium Device
        return "md"
    } else {
        // Large Device
        return "lg"
    }
};

এখন আমাদের ফাংশনটি সেট আপ হয়েছে, আমরা এটিকে আনস স্টোরটির মান বলতে পারি:

var device = getBrowserWidth();

আপনার প্রশ্ন ছিল

ব্রাউজারটি যদি হ্যান্ডহেল্ড ডিভাইসে থাকে তবে আমি একটি আলাদা স্ক্রিপ্ট চালাতে চাই।

এখন যে আমাদের কাছে ডিভাইসের তথ্য রয়েছে তা যদি একটি বিবৃতি থাকে:

if(device === "xs"){
  // Enter your script for handheld devices here 
}

এখানে কোডপেনের একটি উদাহরণ রয়েছে: http://codepen.io/jacob-king/pen/jWEeWG


এটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে। যেহেতু আমি কয়েকটি মোবাইল ফরোয়ার্ড পৃষ্ঠাগুলির জন্য বুটস্ট্র্যাপ ব্যবহার করছিলাম, তাই এই কৌশলটি অ-মোবাইল ফরোয়ার্ড (নন-বুটস্ট্র্যাপ) থেকে বুটস্ট্র্যাপ পৃষ্ঠায় অটো পুনঃনির্দেশ করতে ভাল কাজ করেছে worked টিপ: আইই 11 এফ 12 সরঞ্জামগুলিতে আমি একটি ছোট সমস্যা পেয়েছি: একটি মোবাইল ডিভাইসের জন্য আমি এফ 12 দেব সরঞ্জামগুলিতে এমুলেশন চালু করেছিলাম এবং এতে উইন্ডোর আকার সনাক্ত করতে সমস্যা হয়েছিল। আমি এটি এক্স এর ব্রেক পয়েন্টের নীচে পুনরায় আকার দিয়েছিলাম তবে এটি এমডি হিসাবে সনাক্ত করছে। শীঘ্রই আমি কোনও ফোন এমুলেটিং বন্ধ করে পৃষ্ঠাটি রিফ্রেশ করেছি, এটি সঠিকভাবে আকারটি সনাক্ত করেছে এবং আমার কোডে আমি বুটস্ট্র্যাপ পৃষ্ঠায় পুনর্নির্দেশ করেছি।
জেফ মার্লেগার

সেটাই আমি কিছুক্ষণ খুঁজছিলাম। ধন্যবাদ!
বিকাশকারী

2
@ জ্যাকবকিং আপনি বলেছিলেন যে এর Small Devices range from 768 to 991 pixels.অর্থ এটি হওয়া উচিত window.innerWidth < 992(991 অন্তর্ভুক্ত করা হয়েছে) 1199 এর জন্য একই জিনিসটি এটি <1200 হওয়া উচিত
মেডবুজিড

13

জাভাস্ক্রিপ্টের এক লাইনে:

var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));

যদি ব্যবহারকারী এজেন্টে 'মবি' থাকে (এমডিএন অনুসারে) এবং অন্টচাস্টার্ট পাওয়া যায় তবে এটি সম্ভবত একটি মোবাইল ডিভাইস হতে পারে।


1
আমার জন্য /Mobi/.test(navigator.userAgent)... এটি করা matchহয়নি
কলাআসিড

12

আমি অবাক হয়েছি যে কোনও সুন্দর সাইট কেউ দেখায়নি : http://detectmobilebrowser.com/ এটি মোবাইল সনাক্তকরণের জন্য বিভিন্ন ভাষায় কোড তৈরি করেছে (সহ তবে সীমাবদ্ধ নয়):

  • এ্যাপাচি
  • এএসপি
  • সি শার্প
  • আইআইএস
  • জাভাস্ক্রিপ্ট
  • nginx
  • পিএইচপি
  • পার্ল
  • পাইথন
  • পাগল

এবং যদি আপনার পাশাপাশি ট্যাবলেটগুলি সনাক্ত করার প্রয়োজন হয় তবে অতিরিক্ত RegEx পরামিতিগুলির জন্য কেবল বিভাগ সম্পর্কে পরীক্ষা করুন।

অ্যান্ড্রয়েড ট্যাবলেট, আইপ্যাডস, কিন্ডল ফায়ারস এবং প্লেবুকগুলি ডিজাইন দ্বারা সনাক্ত করা যায় না। ট্যাবলেটগুলির জন্য সমর্থন যুক্ত |android|ipad|playbook|silkকরতে, প্রথম রেজিজেটে যুক্ত করুন।


আমার জন্য এটি কাজ করছিল, আপনি কোন কোডটি ব্যবহার করেন এবং কোথায় এটি একটি সমস্যা বলে মনে হচ্ছে আপনি আরও নির্দিষ্ট করে বলতে পারেন?
মাকসিম লুজিক

এই পৃষ্ঠাটি প্রতিক্রিয়া, অন্য সমস্ত প্রতিক্রিয়াগুলির মধ্যে সেই পৃষ্ঠার অনুলিপি
রুবান রুজ

11

আপনি যদি ছোট ডিসপ্লে সম্পর্কে বিশেষত উদ্বিগ্ন না হন তবে আপনি প্রস্থ / উচ্চতা সনাক্তকরণ ব্যবহার করতে পারেন। প্রস্থটি যদি কোনও নির্দিষ্ট আকারের নীচে থাকে তবে মোবাইল সাইটটি উপরে ছুঁড়ে দেওয়া হবে। এটি নিখুঁত উপায় নাও হতে পারে তবে একাধিক ডিভাইস সনাক্ত করা সম্ভবত এটি সবচেয়ে সহজ। আইফোন 4 (বৃহত রেজোলিউশন) এর জন্য আপনাকে একটি নির্দিষ্ট লাগাতে হতে পারে।


9

নিয়ন্ত্রণের অতিরিক্ত স্তর যুক্ত করতে আমি HTML5 স্টোরেজটি মোবাইল স্টোরেজ বা ডেস্কটপ স্টোরেজ ব্যবহার করছে কিনা তা সনাক্ত করতে ব্যবহার করি। যদি ব্রাউজার স্টোরেজ সমর্থন করে না তবে আমার কাছে মোবাইল ব্রাউজারের নামের একটি অ্যারে রয়েছে এবং আমি ব্যবহারকারী এজেন্টের সাথে অ্যারের ব্রাউজারগুলির সাথে তুলনা করি।

এটা বেশ সহজ। ফাংশনটি এখানে:

// Used to detect whether the users browser is an mobile browser
function isMobile() {
    ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
    ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>

    if (sessionStorage.desktop) // desktop storage 
        return false;
    else if (localStorage.mobile) // mobile storage
        return true;

    // alternative
    mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile','tablet','mobi']; 
    var ua=navigator.userAgent.toLowerCase();
    for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true;

    // nothing found.. assume desktop
    return false;
}

1
লোকালস্টোরের উপর ভিত্তি করে আপনার অনুমানটি বেশ আকর্ষণীয়, আপনি কি আপনার স্ক্রিপ্টের সাথে সঠিকভাবে মেলে এমন অনেকগুলি সমর্থিত ডিভাইস বা ব্রাউজার সরবরাহ করতে পারেন? আমি জিজ্ঞাসা করা এই প্রশ্নের সমাধান খুঁজতে আগ্রহী এবং মোবাইল-ট্যাবলেট ব্রাউজারগুলি সনাক্ত করার চেষ্টা করা সত্যই একটি আকর্ষণীয় কাজ হতে পারে
গ্রুবার

9

যদি পাওয়া যায় যে কেবল চেক navigator.userAgentকরা সর্বদা নির্ভরযোগ্য নয়। বৃহত্তর নির্ভরযোগ্যতা এছাড়াও পরীক্ষা করে অর্জন করা যেতে পারে navigator.platform। আগের উত্তরের একটি সাধারণ পরিবর্তন আরও ভাল কাজ করে বলে মনে হচ্ছে:

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

5
ইচ্ছামত কোনও মন্তব্য ছাড়াই একটি উত্তর ডাউনভোট করার অনুমতি দেওয়া উচিত নয়। সেরা, এটা অভদ্র।
চিহ্নিত করুন

8

আমি আপনাকে http://wurfl.io/ চেক আউট করার পরামর্শ দিচ্ছি

সংক্ষেপে, আপনি যদি একটি ক্ষুদ্র জাভাস্ক্রিপ্ট ফাইল আমদানি করেন:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

আপনার মতো এমন একটি JSON অবজেক্ট রেখে যাবে:

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

(এটি ধরে নিচ্ছেন যে আপনি অবশ্যই একটি নেক্সাস 7 ব্যবহার করছেন) এবং আপনি এগুলি করতে সক্ষম হবেন:

if(WURFL.is_mobile) {
    //dostuff();
}

এটিই আপনি খুঁজছেন।

দাবি অস্বীকার: আমি এই সংস্থাটির জন্য কাজ করি যা এই নিখরচায় পরিষেবা সরবরাহ করে।


Wurfl nexus7 এবং আইপ্যাড মিনি সনাক্ত করতে ব্যর্থ হয়েছে!
জ্যাকব 12

নেক্সাস about সম্পর্কে কিছু ঠিক নেই you আপনি কী সেটিংসে ইউএ স্ট্রিংয়ের নেক্সাস স্পুফ করেননি তা নিশ্চিত? যতদূর আইপ্যাড মিনি সম্পর্কিত, হ্যাঁ, অন্য আইপ্যাড থেকে পৃথক করা খুব কঠিন, তবে এটি এখনও আইপ্যাড হিসাবে স্বীকৃত ছিল, তাই না? আপনি কি আমার পোস্টকে অবচেতন করলেন?
লুকা পাসানি

না, আইপ্যাড মিনিটি একটি ডেস্কটপ ডিভাইস হিসাবে ধরা পড়েছিল
জ্যাকব

7

এই পোস্টটি দেখুন , এটি স্পর্শ ডিভাইসগুলি সনাক্ত করার সময় কী করতে হবে বা টাচস্টার্ট ইভেন্ট বলা হলে কী করবেন তার জন্য একটি দুর্দান্ত কোড স্নিপেট দেয়:

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}

'ontouchstart' in document.documentElementস্পর্শ সমর্থনের চেয়ে সম্ভবত একটি ভাল পরীক্ষা window.Touch। আরও ভাল, মডার্নআইজিআরজেজেড ( মডার্নজার ডটকম ) ব্যবহার করুন কারণ স্পর্শ সনাক্তকরণ সঠিকভাবে পাওয়ার চেষ্টা করে অনেক চিন্তাভাবনা ব্যয় করেছে। আপনি যদি উন্নয়নের কোডটি দেখেন এবং "টাচ"-এ সন্ধান করেন তবে আপনি তাদের আধুনিক স্পষ্টকরণের কোডইনকে আধুনিকীকরণডাউনলোডডাউনলোডস / আধুনিকীকরণজেজে দেখতে পাবেন।
রোবোট

3
টাচ সনাক্তকরণ আমাকে সমস্যায় ফেলেছে, কারণ কিছু নতুন উইন্ডোজ 8 ল্যাপটপ ক্রোমে টাচস্ক্রিন হিসাবে সনাক্ত করেছে, যা বিজোড় ফলাফলের দিকে নিয়ে যায়।
জে ওয়ার্নার

6

আপনি একটি মোবাইল ব্রাউজারে চালাচ্ছেন কিনা সে সম্পর্কে সত্য / মিথ্যা উত্তর পেতে আপনি এখানে একটি ফাংশন ব্যবহার করতে পারেন। হ্যাঁ, এটি ব্রাউজার-স্নিফিং, তবে কখনও কখনও এটি আপনার প্রয়োজন মতো হয়।

function is_mobile() {
    var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry'];
    for(i in agents) {
        if(navigator.userAgent.match('/'+agents[i]+'/i')) {
            return true;
        }
    }
    return false;
}

1
এটি অনেকগুলি মোবাইল ব্রাউজার, বিশেষত মোবাইল ক্রোম সনাক্ত করতে ব্যর্থ হবে। অপেরা মোবাইল, ফায়ারফক্স মোবাইল, অপেরা মিনি, বিভিন্ন জনপ্রিয় চীনা মোবাইল ব্রাউজারে, ইত্যাদি ইত্যাদি এটি সম্ভবত কিছু ব্যর্থ হবে
robocat

আপনার এর দরকার নেই for! + আপনি একটি রেজিপ্লেক্স তৈরি করতে ভুলে গেছেন। এখানে একটি সহজ সরল:return !!navigator.userAgent.match(new RegExp(agents.join('|'),'i'))
অরিডাম

6

সমস্ত উত্তর ব্রাউজারটি সনাক্ত করতে ব্যবহারকারী-এজেন্ট ব্যবহার করে তবে ব্যবহারকারী-এজেন্টের ভিত্তিতে ডিভাইস সনাক্তকরণ খুব ভাল সমাধান নয়, টাচ ডিভাইসের মতো বৈশিষ্ট্যগুলি সনাক্ত করা ভাল (নতুন jQuery এ তারা সরিয়ে $.browserএবং $.supportপরিবর্তে ব্যবহার করে)।

মোবাইল সনাক্ত করতে আপনি স্পর্শ ইভেন্টগুলির জন্য পরীক্ষা করতে পারেন:

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

জাভাস্ক্রিপ্ট ব্যবহার করে কোনও 'টাচ স্ক্রিন' ডিভাইস সনাক্ত করার সর্বোত্তম উপায়টি কী থেকে নেওয়া হয়েছে ?


4
দুর্ভাগ্যক্রমে, এটি নির্ভরযোগ্য নয় এবং যাইহোক এটি trueটাচস্ক্রিন সহ ডেস্কটপ পিসিতে ফিরে আসে । stucox.com/blog/you-cant-detect-a-touchscreen
জাস্টামার্টিন

1
টাচস্ক্রীন এবং সম্পূর্ণ ব্রাউজারের অভিজ্ঞতা সহ ল্যাপটপগুলি ভুলে যাবেন না। :-)
মাইক Kormentedy

এটি কোনও মোবাইল-ডিভাইস কিনা তা যাচাই করার উপায় এটি নাও হতে পারে তবে আপনার ফাংশনের নাম অনুসারে এটি স্পর্শ-সক্ষম ডিভাইসগুলির জন্য চেক করার জন্য উপযুক্ত। আমার কাছ থেকে +1 ;-)
কাঠারা

6

ডিভাইসের ধরণটি ব্যবহৃত হচ্ছে কিনা তা পরীক্ষা করতে আমি নীচের স্ট্রিংগুলির কম্বো ব্যবহার করার পরামর্শ দিচ্ছি would

মজিলা ডকুমেন্টেশন স্ট্রিং অনুযায়ী Mobiবাঞ্ছনীয়। তবে, পুরানো কিছু ট্যাবলেট সত্যই ফিরে আসে না যদি কেবল Mobiব্যবহৃত হয়, তাই Tabletআমাদেরও স্ট্রিং ব্যবহার করা উচিত ।

একইভাবে, নিরাপদ পাশে থাকার জন্য iPadএবং iPhoneস্ট্রিংগুলি ডিভাইসের প্রকারটি পরীক্ষা করতেও ব্যবহৃত হতে পারে।

নতুন ডিভাইসগুলির বেশিরভাগই একা স্ট্রিংয়ের trueজন্য ফিরে আসত Mobi

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}

3
ট্যাবলেটগুলিতে কাজ করতে আমাকে সেখানে "অ্যান্ড্রয়েড" যুক্ত করতে হয়েছিল। আমি টুইট করতে হবে তবে আমি পদ্ধতির পছন্দ করি।
অ্যান্ডি

6

এটিকে সহজে পরিচালনা করতে আপনি মিডিয়া ক্যোয়ারীটি ব্যবহার করতে পারেন।

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}

আমি এই পদ্ধতির পছন্দ করি, আমি window.matchMedia("(pointer:coarse)").matches;একটি ভিন্ন উত্তর থেকে তুলেছি।
জেসন লিডন

6

দুর্দান্ত উত্তর ধন্যবাদ। উইন্ডোজ ফোন এবং জুনে সমর্থন করার জন্য ছোট উন্নতি:

if (navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/webOS/i) ||
  navigator.userAgent.match(/iPhone/i) ||
  navigator.userAgent.match(/iPad/i) ||
  navigator.userAgent.match(/iPod/i) ||
  navigator.userAgent.match(/BlackBerry/) ||
  navigator.userAgent.match(/Windows Phone/i) ||
  navigator.userAgent.match(/ZuneWP7/i)
) {
  // some code
  self.location = "top.htm";
}

আমি বলব যদি আপনি মোবাইল ডিভাইসের জন্য হোভার / টেনে আনার ইভেন্টগুলি পরিচালনা করার চেষ্টা করছেন তবে এটি সবচেয়ে সহজ (সম্ভবত সেরা না) সমাধান। আমি "ইসমোবাইল" বুলিয়ান তৈরি করতে এর মতো কিছু ব্যবহার করি যা প্রতিটি হওয়ার / মাউসওভার ইভেন্টের জন্য পরীক্ষা করা হয়। যাইহোক, আমার দুটি সেন্ট চালায়। আরও জেএস লাইব্রেরি বা কোড যুক্ত করা যা ব্যবহারকারীর ইন্টারঅ্যাকশন প্রয়োজন আমার কাছে খুব বেশি অর্থবোধ করে না; আমি ভুল থাকলে আমাকে সংশোধন করুন।
মিণম্যাট

3
যেহেতু আপনি নিয়মিত এক্সপ্রেশন ব্যবহার করছেন, প্রকৃতপক্ষে সেগুলি ব্যবহার করুন:if (navigator.userAgent.match(/Android|webOS|iPhone|iPad|etc/)){self.location = "top.htm"}
foobarbecue

5

এটা ব্যবহার কর:

/**  * jQuery.browser.mobile (http://detectmobilebrowser.com/)  * jQuery.browser.mobile will be true if the browser is a mobile device  **/ (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/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|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|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|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

তারপরে এটি ব্যবহার করুন:

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}

5

Http://detectmobilebrowser.com/ এর উপর ভিত্তি করে সাধারণ ফাংশন

function isMobile() {
    var a = navigator.userAgent||navigator.vendor||window.opera;
    return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|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(a)||/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(a.substr(0,4));
}

5
<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

আপনি যদি কোনও ব্রাউজার পেয়ে যান এবং আপনি যদি নেভিগেটর.ইউসারএজেন্ট পাওয়ার চেষ্টা করেন তবে আমরা ব্রাউজারের তথ্য অনুসরণের মতো কিছু পেয়ে যাব

মজিলা / 5.0 (ম্যাকিনটোস; ইন্টেল ম্যাক ওএস এক্স 10_13_1) অ্যাপলওয়েবকিট / 537.36 (কেএইচটিএমএল, গেকোর মতো) ক্রোম / 64.0.3282.186 সাফারি / 537.36

আপনি যদি মোবাইলে করেন তবে একই জিনিস আপনি অনুসরণ করছেন

মজিলা / 5.0 (লিনাক্স; অ্যান্ড্রয়েড 8.1.0; পিক্সেল বিল্ড / ওপিপি 6.171019.012) অ্যাপলওয়েবকিট / 537.36 (কেএইচটিএমএল, গেকোর মতো) Chrome / 61.0.3163.98 মোবাইল সাফারি / 537.36

প্রতিটি মোবাইল ব্রাউজারে "মোবাইল" যুক্ত স্ট্রিং সহ ইউজ্রেজেন্ট থাকবে তাই আমি বর্তমান ব্যবহারকারীর এজেন্ট ওয়েব / মোবাইল কিনা তা পরীক্ষা করতে আমার কোডে উপরের স্নিপেট ব্যবহার করছি। ফলাফলের ভিত্তিতে আমি প্রয়োজনীয় পরিবর্তনগুলি করব।



4

কেমন হয় mobiledetect.net ?

অন্যান্য সমাধানগুলি খুব বেসিক বলে মনে হয়। এটি হালকা পিএইচপি ক্লাস। এটি মোবাইল পরিবেশটি সনাক্ত করতে নির্দিষ্ট HTTP শিরোনামগুলির সাথে মিলিত ব্যবহারকারী-এজেন্ট স্ট্রিংটি ব্যবহার করে। ওয়ার্ডপ্রেস, দ্রুপাল, জুমলা, ম্যাজেন্টো ইত্যাদির জন্য উপলভ্য তৃতীয় পক্ষের যে কোনও একটি প্লাগইন ব্যবহার করে আপনি মোবাইল সনাক্তকরণ থেকেও উপকার পেতে পারেন


প্রশ্ন jQuery জন্য জিজ্ঞাসা কারণ?
ক্র্যাকারজ্যাক

3

ব্যবহারকারী এজেন্ট স্ট্রিং একা বিশ্বাস করা উচিত নয়। নীচের সমাধানটি সমস্ত পরিস্থিতিতে কাজ করবে।

function isMobile(a) {
  return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|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|xda|xiino/i.test(a) || /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(a.substr(0, 4)));
}

এবং এই ফাংশন কল:

isMobile(navigator.userAgent || navigator.vendor || window.opera)
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.