ජංගම උපාංගයක් හඳුනා ගැනීමට හොඳම ක්‍රමය කුමක්ද?

JQuery හි පරිශීලකයෙකු ජංගම උපාංගයක් භාවිතා කරන්නේද නැද්ද යන්න හඳුනා ගැනීමට ස්ථිර ක්‍රමයක් තිබේද? CSS @media ගුණාංගයට සමාන දෙයක් තිබේද? බ්‍රව්සරය අතින් ගෙන යා හැකි උපාංගයක් තිබේ නම් වෙනත් ස්ක්‍රිප්ට් එකක් ධාවනය කිරීමට මම කැමතියි.

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"

සටහන: 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;
}

මට නම් කුඩායි ඒ නිසා මම මෙම තාක්ෂණය භාවිතා කරනවා:

CSS ගොනුවේ:

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

JQuery / JavaScript ගොනුවේ:

$( 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
    }
 });

මගේ පරමාර්ථය වූයේ මගේ වෙබ් අඩවිය "ජංගම-හිතකාමී" වීමයි. එබැවින් මම CSS මාධ්‍ය විමසුම් භාවිතා කරන්නේ තිරයේ ප්‍රමාණය අනුව මූලද්‍රව්‍ය පෙන්වීමට / සැඟවීමට ය.

උදාහරණයක් ලෙස, මගේ ජංගම අනුවාදයේ ෆේස්බුක් ලයික් බොක්ස් සක්‍රිය කිරීමට මට අවශ්‍ය නැත, මන්ද එය එම පැතිකඩ රූප සහ දේවල් පටවන බැවිනි. ජංගම අමුත්තන්ට එය හොඳ නැත. එබැවින්, බහාලුම් මූලද්‍රව්‍යය සැඟවීමට අමතරව, මම මෙයද කරන්නේ 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

මෙම ක්‍රමයේ ඇති වාසිය නම් එය සරල හා කෙටි පමණක් නොව, ඔබට අවශ්‍ය නම් ස්මාර්ට් ෆෝන් සහ ටැබ්ලට් වැනි විවිධ උපාංග වෙන වෙනම ඉලක්ක කර ගත හැකි වීමයි.

මොසිල්ලාට අනුව - පරිශීලක නියෝජිතයා භාවිතා කරමින් බ්‍රව්සර් හඳුනාගැනීම :

සාරාංශයක් ලෙස, ජංගම උපාංගයක් හඳුනා ගැනීම සඳහා පරිශීලක නියෝජිතයාගේ ඕනෑම තැනක “මොබි” නූල සෙවීම අපි නිර්දේශ කරමු.

මෙවැනි:

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

ජංගම මොසිල්ලා, සෆාරි, අයිඊ, ඔපෙරා, ක්‍රෝම් යනාදී සියලුම පොදු ජංගම බ්‍රව්සර් පරිශීලක නියෝජිතයින්ට මෙය ගැලපේ.

Android සඳහා යාවත්කාලීන කරන්න

ටැබ්ලට් සඳහා Androidවන ක්‍රෝම් පරිශීලක නියෝජිත පෙළට “මොබී ” ඇතුළත් නොවන බැවින් එරික්එල් පරිශීලක නියෝජිතයෙකු ලෙස පරීක්ෂා කිරීම නිර්දේශ කරයි (දුරකථන අනුවාද කෙසේ වෙතත්):

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

සරල හා effective ලදායී එක් ලයිනර්:

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

කෙසේ වෙතත් ඉහත කේතය ස්පර්ශක තිරය සහිත ලැප්ටොප් පරිගණක සඳහා වන නඩුව සැලකිල්ලට නොගනී. මේ අනුව, මම ජූලියන් විසඳුම මත පදනම්ව මෙම දෙවන අනුවාදය ලබා දෙමි :

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

ජංගම උපාංගයක් හඳුනා ගැනීමට අවශ්‍ය වීමෙන් ඔබ කරන්නේ "බ්‍රව්සර් ස්නයිෆින්" සංකල්පයට ටිකක් සමීප වීමයි. සමහර අංග හඳුනා ගැනීම වඩා හොඳ වනු ඇත. Http://www.modernizr.com/ වැනි පුස්තකාලවලට ඒ සඳහා සහාය විය හැකිය.

උදාහරණයක් ලෙස, ජංගම සහ ජංගම නොවන අතර රේඛාව කොහිද? එය දිනෙන් දින බොඳ වේ.

එය jQuery නොවේ, නමුත් මට මෙය හමු විය: http://detectmobilebrowser.com/

එය භාෂා කිහිපයකින් ජංගම බ්‍රව්සර් හඳුනා ගැනීමට ස්ක්‍රිප්ට් සපයන අතර ඉන් එකක් ජාවාස්ක්‍රිප්ට් ය. එය ඔබ සොයන දේට උදව් වනු ඇත.

කෙසේ වෙතත්, ඔබ jQuery භාවිතා කරන බැවින්, ඔබට jQuery.support එකතුව ගැන දැනුවත් වීමට අවශ්‍ය විය හැකිය. එය වත්මන් බ්‍රව්සරයේ හැකියාවන් හඳුනා ගැනීම සඳහා ගුණාංග එකතුවකි. ප්‍රලේඛනය මෙහි ඇත: http://api.jquery.com/jQuery.support/

ඔබ ඉටු කිරීමට උත්සාහ කරන්නේ කුමක්දැයි මම නොදනිමි, මේවායින් වඩාත්ම ප්‍රයෝජනවත් වන්නේ කුමක්දැයි මම නොදනිමි.

මේ සියල්ල කියමින්, ඔබේ හොඳම ඔට්ටුව වන්නේ සේවාදායක පාර්ශවීය භාෂාවක් භාවිතා කර ප්‍රතිදානය වෙත වෙනත් ස්ක්‍රිප්ට් එකක් හරවා යැවීම හෝ ලිවීමයි (එය විකල්පයක් නම්). ජංගම බ්‍රව්සරයක x හි හැකියාවන් ඔබ සැබවින්ම නොදන්නා හෙයින්, සේවාදායකයේ පැත්තේ හඳුනාගැනීම සහ වෙනස් කිරීමේ තර්කනය වඩාත් විශ්වාසදායක ක්‍රමය වනු ඇත. ඇත්ත වශයෙන්ම, ඔබට සේවාදායක පාර්ශවීය භාෂාවක් භාවිතා කළ නොහැකි නම් ඒ සියල්ලම වැදගත් කරුණකි :)

සමහර විට අයිෆෝන් වෙළඳසැලට හෝ ඇන්ඩ්‍රොයිඩ් වෙළඳපොළට සබැඳියක් වැනි සේවාදායකයාට එම උපාංගයට විශේෂිත වූ අන්තර්ගතයන් පෙන්වීම සඳහා කුමන වෙළඳ නාම උපාංගයක් භාවිතා කරන්නේ දැයි දැන ගැනීමට අවශ්‍ය වේ. නවීකරණකරණය විශිෂ්ටයි, නමුත් ඔබට පෙන්වන්නේ HTML5 හෝ ෆ්ලෑෂ් වැනි බ්‍රව්සර හැකියාවන් පමණි.

සෑම උපාංග වර්ගයක් සඳහාම වෙනස් පංතියක් පෙන්වීම සඳහා jQuery හි මගේ UserAgent විසඳුම මෙන්න:

/*** 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();
    }
}

මෙම විසඳුම ග්‍රැෆික් ම i ් ac ාක්කා http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

මෙයින් විසඳුමක් හමු විය: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-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...
}

"ජංගම" යන්නෙන් ඔබ අදහස් කරන්නේ "කුඩා තිරය" නම්, මම මෙය භාවිතා කරමි:

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

අයිෆෝන් මත ඔබ 320 හි window.screen.width සමඟ අවසන් වනු ඇත. ඇන්ඩ්‍රොයිඩ් හි ඔබ අවසන් වනුයේ window.outerWidth 480 (එය ඇන්ඩ්‍රොයිඩ් මත රඳා පැවතිය හැකි වුවද) ය. අයිපෑඩ් සහ ඇන්ඩ්‍රොයිඩ් ටැබ්ලට් පරිගණක 768 වැනි අංක ලබා දෙන අතර එමඟින් ඔබට අවශ්‍ය පරිදි සම්පූර්ණ දර්ශනය ලැබෙනු ඇත.

ඔබ Modernizr භාවිතා 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 භාවිතා නොකරන්නේ නම්, ඔබට Modernizr.touchඉහත ශ්‍රිතය ආදේශ කළ හැකිය('ontouchstart' in document.documentElement)

පරිශීලක නියෝජිතයා පරීක්ෂා කිරීමෙන් iemobileඔබට හඳුනාගත් මයික්‍රොසොෆ්ට් ජංගම උපාංගවලට වඩා පුළුල් පරාසයක් ලැබෙනු ඇති බව සලකන්න Windows Phone.

මෙම SO ප්‍රශ්නයද බලන්න

ඔබට විශ්වාසය තැබිය navigator.userAgentනොහැක, සෑම උපාංගයක්ම එහි සැබෑ මෙහෙයුම් පද්ධතිය හෙළි නොකරයි. උදාහරණයක් ලෙස මගේ HTC මත, එය සැකසුම් මත රඳා පවතී ("ජංගම අනුවාදය භාවිතා කිරීම" සක්‍රිය / අක්‍රිය). මත http://my.clockodo.com , අපි සරලව භාවිතා screen.widthකුඩා උපකරණ සොයා ගැනීමට. අවාසනාවට, සමහර ඇන්ඩ්‍රොයිඩ් අනුවාද වල 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");
}

මෙම ප්‍රශ්නයට පිළිතුරු රාශියක් ඇති බව මම දනිමි, නමුත් මා දුටු දෙයින් කිසිවෙකු මෙය විසඳන ආකාරයට පිළිතුරට එළඹෙන්නේ නැත.

පළල මත පදනම් වූ වෙබ් ලේඛනයට අදාළ මෝස්තර මොනවාද යන්න තීරණය කිරීම සඳහා CSS පළල (මාධ්‍ය විමසුම්) භාවිතා කරයි. JavaScript හි පළල භාවිතා නොකරන්නේ ඇයි?

උදාහරණයක් ලෙස, බූට්ස්ට්‍රැප් (ජංගම පළමු) මාධ්‍ය විමසුම් වල, හදිසි / කඩන ස්ථාන 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 ප්‍රකාශයකි:

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

කෝඩ්පෙන් හි උදාහරණයක් මෙන්න: http://codepen.io/jacob-king/pen/jWEeWG

ජාවාස්ක්‍රිප්ට් එක පේළියක:

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

පරිශීලක නියෝජිතයා තුළ 'මොබී' (එම්ඩීඑන් අනුව) සහ ඔන්ටූච්ස්ටාර්ට් තිබේ නම් එය ජංගම උපාංගයක් විය හැකිය.

කිසිවෙකු ලස්සන වෙබ් අඩවියක් පෙන්වා නොදීම ගැන මම පුදුම වෙමි: http://detectmobilebrowsers.com/ ජංගම හඳුනාගැනීම සඳහා විවිධ භාෂාවලින් එය සූදානම් කළ කේතයක් ඇත (ඇතුළුව නමුත් ඒවාට පමණක් සීමා නොවේ):

• අපාචි
• සහකාර පොලිස් අධිකාරී
• සී #
• IIS
• ජාවාස්ක්‍රිප්ට්
• NGINX
• PHP
• පර්ල්
• පයිතන්
• රේල් පීලි

ඔබට ටැබ්ලට් පරිගණකයද හඳුනා ගැනීමට අවශ්‍ය නම්, අතිරේක RegEx පරාමිතිය සඳහා About කොටස පරීක්ෂා කරන්න.

ඇන්ඩ්‍රොයිඩ් ටැබ්ලට්, අයිපෑඩ්, කින්ඩල් ෆයර් සහ ප්ලේබුක්ස් නිර්මාණයෙන් අනාවරණය නොවේ. ටැබ්ලට් සඳහා සහය එක් |android|ipad|playbook|silkකිරීමට, පළමු රීජෙක්ස් එකට එක් කරන්න .

කුඩා සංදර්ශන ගැන ඔබ විශේෂයෙන් කනස්සල්ලට පත් නොවන්නේ නම් ඔබට පළල / උස හඳුනාගැනීම භාවිතා කළ හැකිය. එබැවින් පළල යම් ප්‍රමාණයකට වඩා අඩු නම්, ජංගම වෙබ් අඩවිය ඉහළට විසි කරනු ලැබේ. එය පරිපූර්ණ ක්‍රමය නොවිය හැකි නමුත් බහු උපාංග සඳහා හඳුනා ගැනීමට පහසුම ක්‍රමය එය විය හැකිය. ඔබට iPhone 4 (විශාල විභේදනය) සඳහා විශේෂිත එකක් දැමීමට අවශ්‍ය විය හැකිය.

අමතර පාලක තට්ටුවක් එක් කිරීමට මම 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;
}

පරීක්ෂා 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...
}

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

ඔබ සොයන්නේ මෙයයි.

වියාචනය: මම මෙම නොමිලේ සේවාව ලබා දෙන සමාගම වෙනුවෙන් වැඩ කරමි.

මෙම පෝස්ට් එක බලන්න , එය ස්පර්ශ උපාංග අනාවරණය වූ විට කුමක් කළ යුතුද යන්න හෝ ටච්ස්ටාර්ට් සිදුවීම හැඳින්වුවහොත් කුමක් කළ යුතුද යන්න පිළිබඳ හොඳ කේත ස්නිපටයක් ලබා දෙයි:

$(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();
}

එය පහසුවෙන් හැසිරවීමට ඔබට මාධ්‍ය විමසුම භාවිතා කළ හැකිය.

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

නියම පිළිතුර ස්තූතියි. වින්ඩෝස් දුරකථනය සහ සූන් සඳහා සහය දැක්වීම සඳහා කුඩා වැඩිදියුණු කිරීම්:

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

ඔබ ජංගම බ්‍රව්සරයක ධාවනය කරන්නේද යන්න පිළිබඳ සත්‍ය / අසත්‍ය පිළිතුරක් ලබා ගැනීමට ඔබට භාවිතා කළ හැකි ශ්‍රිතයක් මෙන්න. ඔව්, එය බ්‍රව්සර් මංකොල්ලකෑමකි, නමුත් සමහර විට එය ඔබට අවශ්‍ය දේම වේ.

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

සියලුම පිළිතුරු බ්‍රව්සරය හඳුනා ගැනීමට පරිශීලක-නියෝජිතයා භාවිතා කරන නමුත් පරිශීලක-නියෝජිතයා මත පදනම් වූ උපාංග හඳුනා ගැනීම එතරම් හොඳ විසඳුමක් නොවේ, ස්පර්ශ උපාංගය වැනි විශේෂාංග හඳුනා ගැනීම වඩා හොඳය (නව jQuery වලදී ඔවුන් ඉවත් $.browserකර $.supportඒ වෙනුවට භාවිතා කරයි ).

ජංගම හඳුනා ගැනීමට ඔබට ස්පර්ශ සිදුවීම් සඳහා පරීක්ෂා කළ හැකිය:

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

සිට ගෙන JavaScript භාවිතා කර 'ස්පර්ශ තිරය' උපාංගය හඳුනාගැනීමට හොඳම ක්රමය කුමක්ද?

උපාංග වර්ගය භාවිතා කරන්නේ දැයි පරීක්ෂා කිරීම සඳහා පහත දැක්වෙන නූල් සංයෝජනය භාවිතා කිරීමට මම යෝජනා කරමි.

අනුව මොසිල්ලා ප්රලේඛනය string Mobiනිර්දේශ කරනු ලැබේ. නමුත්, සමහර පැරණි ටැබ්ලට් පරිගණක භාවිතා කරන්නේ නම් පමණක් සත්‍ය නොවේ Mobi, එබැවින් අපි Tabletද නූල් භාවිතා කළ යුතුය .

ඒ හා සමානව, ආරක්ෂිත පැත්තේ සිටීම සඳහා iPadසහ iPhoneඋපාංග වර්ගය පරීක්ෂා කිරීම සඳහා නූල් ද භාවිතා කළ හැකිය.

නව උපාංග බොහොමයක් නැවත නූල් trueසඳහා Mobiපමණක් පැමිණේ .

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

මෙය භාවිතා කරන්න:

/**  * 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!');
}

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

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

ඔබට කිසියම් බ්‍රව්සරයක් තිබේ නම් සහ ඔබ navigator.userAgent ලබා ගැනීමට උත්සාහ කරන්නේ නම් අපට බ්‍රවුසරයේ තොරතුරු පහත දැක්වේ.

මොසිල්ලා / 5.0 (මැකින්ටොෂ්; ඉන්ටෙල් මැක් ඕඑස් එක්ස් 10_13_1) ඇපල්වෙබ්කිට් / 537.36 (කේඑච්ටීඑම්එල්, ගෙකෝ වැනි) ක්‍රෝම් / 64.0.3282.186 සෆාරි / 537.36

ඔබ ජංගම දුරකතනයෙන් කළහොත් ඔබට පහත දේ ලැබෙනු ඇත

මොසිල්ලා / 5.0 (ලිනක්ස්; ඇන්ඩ්‍රොයිඩ් 8.1.0; පික්සල් බිල්ඩ් / ඕපීපී 6.171019.012) ඇපල්වෙබ්කිට් / 537.36 (කේඑච්ටීඑම්එල්, ගෙකෝ වැනි) ක්‍රෝම් / 61.0.3163.98 ජංගම සෆාරි / 537.36

සෑම ජංගම බ්‍රව්සරයකම “ජංගම” අඩංගු නූල් භාවිතා කරන්නා ඇත, එබැවින් වර්තමාන පරිශීලක නියෝජිතයා වෙබ් / ජංගමද යන්න පරීක්ෂා කිරීම සඳහා මම මගේ කේතයේ ඉහත ස්නිපටය භාවිතා කරමි. ප්‍රති result ලය මත පදනම්ව මම අවශ්‍ය වෙනස්කම් කරමි.

මම මෙය භාවිතා කරමි

if(navigator.userAgent.search("mobile")>0 ){
         do something here
}

Mobiledetect.net ගැන කුමක් කිව හැකිද?

වෙනත් විසඳුම් ඉතා මූලික බව පෙනේ. මෙය සැහැල්ලු PHP පන්තියකි. ජංගම පරිසරය හඳුනා ගැනීම සඳහා එය විශේෂිත HTTP ශීර්ෂ සමඟ ඒකාබද්ධව පරිශීලක-නියෝජිත නූල භාවිතා කරයි. වර්ඩ්ප්‍රෙස්, ඩ්‍රැපාල්, ජූම්ලා, මැජෙන්ටෝ යනාදිය සඳහා ලබා ගත හැකි ඕනෑම තෙවන පාර්ශවීය ප්ලගීන භාවිතා කිරීමෙන් ඔබට මොබයිල් ඩිටෙක්ට් වෙතින් ප්‍රතිලාභ ලබාගත හැකිය.

මගේ ව්‍යාපෘති වලදී මම භාවිතා කරන කේතය මෙයයි:

function isMobile() {
 try {
    if(/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)) {
     return true;
    };
    return false;
 } catch(e){ console.log("Error in isMobile"); return false; }
}