ජංගම බ්‍රව්සරයක් සොයා ගැනීම

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

navigator.userAgentරීජෙක්ස් භාවිතා කිරීමෙන් මට එම ශ්‍රිතය භාවිතා කිරීමට හා ලිවීමට හැකි බව මම දනිමි , නමුත් පරිශීලක-නියෝජිතයන් විවිධ වේදිකාවලට වඩා වෙනස් ය. හැකි සෑම උපාංගයක්ම ගැලපීම පහසු වනු ඇතැයි මම සැක කරමි, මෙම ගැටළුව බොහෝ වාර ගණනකට පෙර විසඳා ඇති බැවින් එවැනි කාර්යයක් සඳහා යම් ආකාරයක සම්පූර්ණ විසඳුමක් තිබිය යුතුය.

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

Regex භාවිතා කිරීම ( dettemobilebrowsers.com වෙතින් ):

පරිශීලකයා ජංගම දුරකථනයක් සමඟ සැරිසරනවාද නැද්ද යන්න මත පදනම්ව වටිනාකමක් trueහෝ falseවටිනාකමක් ලබා දෙන ඉතා දිගු හා විස්තීර්ණ රීජෙක්ස් භාවිතා කරන ශ්‍රිතයක් මෙන්න .

window.mobileCheck = function() {
  let check = false;
  (function(a){if(/(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))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

මෙම පරීක්ෂණයට ටැබ්ලට් ඇතුළත් කිරීමට කැමති අයට (ඔබ එසේ නොකළ යුතුය), ඔබට පහත ශ්‍රිතය භාවිතා කළ හැකිය:

window.mobileAndTabletCheck = function() {
  let check = false;
  (function(a){if(/(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|android|ipad|playbook|silk/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))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

මුල් පිළිතුර

ඔබට මෙය කළ හැක්කේ උපාංග ලැයිස්තුවක් හරහා ධාවනය කිරීමෙන් සහ useragentඑවැනි කිසිවක් ගැලපෙන්නේ දැයි පරීක්ෂා කිරීමෙන් ය:

  function detectMob() {
    const toMatch = [
        /Android/i,
        /webOS/i,
        /iPhone/i,
        /iPad/i,
        /iPod/i,
        /BlackBerry/i,
        /Windows Phone/i
    ];

    return toMatch.some((toMatchItem) => {
        return navigator.userAgent.match(toMatchItem);
    });
}

කෙසේ වෙතත්, මෙම ක්‍රමය විශ්වාස කළ නොහැකි යැයි ඔබ විශ්වාස කරන හෙයින්, 800x600 හෝ ඊට අඩු විභේදනයක් ඇති ඕනෑම උපාංගයක් ජංගම උපාංගයක් යැයි ඔබට උපකල්පනය කළ හැකිය , ඔබේ ඉලක්කය ඊටත් වඩා අඩු කරයි (මේ දිනවල බොහෝ ජංගම උපාංගවලට වඩා විශාල විභේදන ඇතත්)

එනම්

  function detectMob() {
    return ( ( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 ) );
  }

යොමුව:

• ජාවාස්ක්‍රිප්ට් සමඟ බ්‍රව්සරය සහ උපාංග හඳුනා ගැනීම

කොහොමද:

if (typeof window.orientation !== 'undefined') { ... }

... සාමාන්‍යයෙන් ස්මාර්ට්ෆෝන් මෙම දේපල සඳහා සහය දක්වන අතර ඩෙස්ක්ටොප් බ්‍රව්සර් සහාය නොදක්වයි.

සංස්කරණය කරන්න: aj ගජස් පෙන්වා දුන් පරිදි, මෙම විසඳුම දැන් අතහැර දමා ඇති අතර එය භාවිතා නොකළ යුතුය ( https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation )

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) || navigator.userAgent.match(/WPDesktop/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

භාවිතා කරන්නේ කෙසේද

if( isMobile.any() ) alert('Mobile');

පරිශීලකයා නිශ්චිත ජංගම උපාංගයක සිටී දැයි පරීක්ෂා කිරීමට:

if( isMobile.iOS() ) alert('iOS');

Ref: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript

Github හි වැඩි දියුණු කළ අනුවාදය: https://github.com/smali-kazmi/detect-mobile-browser

ෆේස්බුක් හි ස්ලිංෂොට් ප්‍රභවයෙන් සරල විසඳුමක් මෙන්න

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
  /* your code here */
}

ජංගම සහ ටැබ්ලට් ලෙස මා පන්ති කරන "ස්පර්ශ තිර උපාංග" හඳුනා ගැනීමට සරල, පිරිසිදු ක්‍රමයක් සොයමින් මෙහි පැමිණියේය. වර්තමාන පිළිතුරු වල පිරිසිදු තේරීමක් සොයා නොගත් නමුත් යමෙකුට උපකාර කළ හැකි පහත සඳහන් දෑ සකස් කර ඇත.

var touchDevice = ('ontouchstart' in document.documentElement);

සංස්කරණය කරන්න : එකවර ස්පර්ශ තිරයක් සහ ජංගම දුරකථන සහිත ඩෙස්ක්ටොප් පරිගණක සඳහා සහය දැක්වීමට ඔබට පහත සඳහන් දෑ භාවිතා කළ හැකිය:

var touchDevice = (navigator.maxTouchPoints || 'ontouchstart' in document.documentElement);

බොහෝ අය ප්‍රකාශ කර ඇති පරිදි, පරිශීලක නියෝජිත දත්තවල චලනය වන ඉලක්කය මත රඳා සිටීම ගැටළු සහගතය. තිරයේ ප්‍රමාණය ගණනය කිරීම සඳහා ද එයම කිව හැකිය.

අතුරු මුහුණත ස්පර්ශ වන්නේද යන්න තීරණය කිරීම සඳහා මගේ ප්‍රවේශය CSS තාක්‍ෂණයකින් ලබාගෙන ඇත :

ජාවාස්ක්රිප්ට් (සියළුම නවීන බ්රවුසරයන් විසින් සහාය) පමණක් භාවිතා කරමින්, මාධ්ය විමසුම් තරගය පහසුවෙන් උපාංගය යන්න සහ ඒවයින් නිකුත් ජංගම .

function isMobile() {
    var match = window.matchMedia || window.msMatchMedia;
    if(match) {
        var mq = match("(pointer:coarse)");
        return mq.matches;
    }
    return false;
}

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

කෙසේ වෙතත්, යමෙක් උපාංගය ජංගම දැයි හඳුනා ගැනීමට මාධ්‍යයක් ලෙස පරිශීලක නියෝජිතයා භාවිතා කළ යුතු නම්, ඔවුන් යෝජනා කරන්නේ:

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

එමනිසා, මෙම එක්-ලයිනර් ප්රමාණවත් වනු ඇත:

const isMobileDevice = window.navigator.userAgent.toLowerCase().includes("mobi");

[යාවත්කාලීන කිරීම]:

අදහස් දැක්වීමේදී @ zenw0lf යෝජනා කරන පරිදි, නිත්‍ය ප්‍රකාශනයක් භාවිතා කිරීම වඩා හොඳ වනු ඇත:

const isMobileDevice = /Mobi/i.test(window.navigator.userAgent)

ජංගම බ්‍රව්සරයක JS කේතය ක්‍රියාත්මක වේද යන්න සොයා ගැනීමට පරිපූර්ණ විසඳුමක් නොමැත, නමුත් පහත දැක්වෙන විකල්ප දෙක බොහෝ අවස්ථාවන්හිදී ක්‍රියාත්මක විය යුතුය.

විකල්ප 1: බ්‍රව්සරය මිරිකීම

!function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,f=/Android/i,g=/(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i,h=/(?=.*\bAndroid\b)(?=.*\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/IEMobile/i,j=/(?=.*\bWindows\b)(?=.*\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.*\bMobile\b)/i,o=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");return"undefined"!=typeof s[1]&&(r=s[0]),s=r.split("Twitter"),"undefined"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==typeof window?this:void 0},s=function(){var a=new r;return a.Class=r,a};"undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function"==typeof define&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this);

alert(isMobile.any ? 'Mobile' : 'Not mobile');

මෙම විශේෂිත බ්‍රව්සර් ස්නයිෆින් කේතය isMobile නම් පුස්තකාලයකි .

විකල්ප 2: window.orientation

window.orientationනිර්වචනය කර ඇත්නම් පරීක්ෂා කරන්න :

var isMobile = window.orientation > -1;
alert(isMobile ? 'Mobile' : 'Not mobile');

සටහන

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

var hasTouchscreen = 'ontouchstart' in window;
alert(hasTouchscreen ? 'has touchscreen' : 'doesn\'t have touchscreen');

ගැලපීමට වඩා කාර්යක්ෂම වන පරිශීලක ඒජන්ට් විසඳුමක් මෙන්න ...

function _isMobile(){
    // if we want a more complete list use this: http://detectmobilebrowsers.com/
    // str.test() is more efficent than str.match()
    // remember str.test is case sensitive
    var isMobile = (/iphone|ipod|android|ie|blackberry|fennec/).test
         (navigator.userAgent.toLowerCase());
    return isMobile;
}

අමතර පාලක තට්ටුවක් එක් කිරීමට මම 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
    var mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile']; 
    for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true;

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

ලක්ෂණය හඳුනා වඩා හොඳ ඔබ වන උපාංගය වලින් හා ඉතා දුෂ්කර සියලු කාලය එළියට එන නව උපාංග සමග පවත්වා ගැනීමට උත්සාහ ගනිමින් ඉන්නවා වඩා, වැනි පුස්තකාල Modernizr යම් අංගයක් ලබා ගත හැකි හෝ නොවේ නම්, ඔබ දන්නවා ඔබට ඉඩ සලසයි.

මේ වගේ දෙයක් ගැන කොහොමද?

if(
    (screen.width <= 640) || 
    (window.matchMedia && 
     window.matchMedia('only screen and (max-width: 640px)').matches
    )
  ){
   // Do the mobile thing
}

මූලද්රව්යය අවධානය යොමු වූ වහාම, ඔබ එය වහාම බොඳ කරයි. GitHub හි තරු 10,000 කට ආසන්න සංඛ්‍යාවක් සහිත ඉතා ජනප්‍රිය හා හොඳින් නඩත්තු කරන ලද අංගයක් වන Bootstrap-datepicker මෙම ප්‍රවේශය භාවිතා කරයි:

if (window.navigator.maxTouchPoints || 'ontouchstart' in document) {
    this.input.blur();
}

https://github.com/uxsolutions/bootstrap-datepicker

උදව් සඳහා ටයිගර්ට ස්තූතියි .

ජංගම හෝ ටැබ්ලට් උපාංග හඳුනා ගැනීමේ හොඳ ක්‍රමයක් වන්නේ බ්‍රව්සරයට ස්පර්ශ සිදුවීමක් නිර්මාණය කළ හැකිද යන්නයි.

සරල ජාවාස්ක්‍රිප්ට් කේතය:

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

if (isMobile()) {
   # do whatever you wanna do!
}

මෙය මට ඉතා හොඳින් ක්‍රියාත්මක විය, නමුත් ස්පර්ශක තිර දර්ශනයක් ඇතුළත් ලැප්ටොප් උපාංගවල ගැටළුවක් තිබිය හැකිය.

ටච්ස්ක්‍රීන් ලැප්ටොප් පරිගණකයක් ජංගම උපාංගයක් ලෙස අනාවරණය වේ දැයි මට විශ්වාස නැත.

මෙන්න ගැටලුව සඳහා මගේ නැවත සිතීමේ විසඳුමයි. තවමත් පරිපූර්ණ නැත. එකම සැබෑ විසඳුම වනුයේ උපාංග නිෂ්පාදකයින් "ජංගම" සහ "ටැබ්ලටය" පරිශීලක-නියෝජිත නූල් බැරෑරුම් ලෙස සැලකීමට පටන් ගන්නේ නම්.

window.onload = userAgentDetect;
function userAgentDetect() {
  if(window.navigator.userAgent.match(/Mobile/i)
  || window.navigator.userAgent.match(/iPhone/i)
  || window.navigator.userAgent.match(/iPod/i)
  || window.navigator.userAgent.match(/IEMobile/i)
  || window.navigator.userAgent.match(/Windows Phone/i)
  || window.navigator.userAgent.match(/Android/i)
  || window.navigator.userAgent.match(/BlackBerry/i)
  || window.navigator.userAgent.match(/webOS/i)) {
    document.body.className += ' mobile';
    alert('True - Mobile - ' + navigator.userAgent);
  } else {
    alert('False - Mobile - ' + navigator.userAgent);
  }
  if(window.navigator.userAgent.match(/Tablet/i)
  || window.navigator.userAgent.match(/iPad/i)
  || window.navigator.userAgent.match(/Nexus 7/i)
  || window.navigator.userAgent.match(/Nexus 10/i)
  || window.navigator.userAgent.match(/KFAPWI/i)) {
    document.body.className -= ' mobile';
    document.body.className += ' tablet';
    alert('True - Tablet - ' + navigator.userAgent);
  } else {
    alert('False - Tablet - ' + navigator.userAgent);
  }
}

නෙක්සස් 7 ටැබ්ලටයේ ඇන්ඩ්‍රොයිඩ් යූඒ නූල පමණක් ඇති විට කුමක් සිදුවේද? පළමුවෙන්ම, ජංගම දුරකථනය සත්‍ය බවට පත්වේ, පසුව ටැබ්ලටයේ ද සත්‍ය බවට පත්වේ, නමුත් ටැබ්ලටය බොඩි ටැගයෙන් ජංගම යූඒඒ නූල මකා දමනු ඇත.

CSS:

body.tablet { background-color: green; }
body.mobile { background-color: red; }

alertසංවර්ධනය සඳහා එකතු කරන ලද රේඛා. ක්‍රෝම් කොන්සෝලයට බොහෝ අත් උපාංග අනුකරණය කළ හැකිය. එහි පරීක්ෂා කරන්න.

සංස්කරණය කරන්න:

මෙය භාවිතා නොකරන්න, ඒ වෙනුවට විශේෂාංග හඳුනාගැනීම භාවිතා කරන්න. බොහෝ උපාංග සහ වෙළඳ නාම එහි ඇති අතර කිසි විටෙකත් වෙළඳ නාමයක් ඉලක්ක කිරීම නිවැරදි විසඳුම නොවේ.

එක ලයිනර් එකක් තියෙනවා

function isMobile() {
  return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};

Http://wurfl.io/ පරීක්ෂා කර බැලීමට මම ඔබට උපදෙස් දෙමි

කෙටියෙන් කිවහොත්, ඔබ ඉතා කුඩා JS ගොනුවක් ආනයනය කරන්නේ නම්:

<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.form_factor == "Tablet"){
    //dostuff();
}

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

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

භාවිත නඩුව මත රඳා පවතී. සියලුම ජංගම උපාංගවලට බැටරියක් අවශ්‍ය වේ. ඔබ පසුපස ඇති දේ බැටරිය ඉවතට නොගෙන ගණනය කිරීමේ බලය නම් බැටරි තත්ව API භාවිතා කරන්න :

navigator.getBattery().then(battery => {
  battery.charging ? 'charging' : 'not charging';
});

ඔබ සොයන දේ ඉදිරිපත් කිරීමේ භාවිතය නම් matchMedia, එය බූලියන් අගයක් ලබා දෙයි:

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

නැතහොත් ටැබ්ලට් උපාංගවල ඊටත් වඩා හොඳ පරිශීලක අත්දැකීමක් සඳහා ඒවා ඒකාබද්ධ කරන්න.

මෙන්න ECMAScript 6 විසඳුමක් (TypeScript සූදානම්)

public isMobile(): boolean {
  let check = false;
  ((a => {
      if (/(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))) check = true;
      }))(navigator.userAgent || navigator.vendor);
  return check;
 }

එය ජංගම උපාංගයක්ද නැද්ද යන්න හඳුනා ගැනීමට සරල උපක්‍රමයක් ඇත. Ontouchstart සිද්ධිය තිබේදැයි පරීක්ෂා කරන්න :

function isMobile()
{
    return "ontouchstart" in window;
}

හොඳම දේ විය යුත්තේ:

var isMobile = (/Mobile/i.test(navigator.userAgent));

නමුත් යොව් බාර්නියා කියනවා වගේ ...

// Seem legit
var isMobile = ('DeviceOrientationEvent' in window || 'orientation' in window);
// But with my Chrome on windows, DeviceOrientationEvent == fct()
if (/Windows NT|Macintosh|Mac OS X|Linux/i.test(navigator.userAgent)) isMobile = false;
// My android have "linux" too
if (/Mobile/i.test(navigator.userAgent)) isMobile = true;

මෙම පරීක්ෂණ 3 න් පසුව, මම විශ්වාස කරන්නේ var isMobile ... හරි

මෙන්න ඔහු සම්පූර්ණ කාර්යය

function isMobile(){
    return (/(android|bb\d+|meego).+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|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|android|ipad|playbook|silk/i.test(navigator.userAgent||navigator.vendor||window.opera)||/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||navigator.vendor||window.opera).substr(0,4)))
}

jQuery.noConflict();
jQuery(document).ready(function(){
    if(isMobile()) alert("Mobile"); else alert("Not Mobile");
});

//true / false
function isMobile()
{
   return (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ); 
}

විශේෂිත ජංගම දුරකතනයක් හඳුනා ගැනීමට ඔබට මෙම නිබන්ධනය අනුගමනය කළ හැකිය. මෙහි ක්ලික් කරන්න .

"window.screen.width" භාවිතා කිරීම ගැන කුමක් කිව හැකිද?

if (window.screen.width < 800) {
// do something
}

හෝ

if($(window).width() < 800) {
//do something
}

සෑම දිනකම නව ජංගම උපාංගයක් ඇති බැවින් මෙය හොඳම ක්‍රමය යැයි මම සිතමි!

(පැරණි බ්‍රව්සර් සඳහා එය සහාය නොදක්වන බව මා සිතුවත්, එය උත්සාහ කර බලන්න :))

බොහෝ නව-ජෙනරල් ජංගම උපාංගවල දැන් 600x400 ට වඩා වැඩි විභේදන ඇති බව සලකන්න. එනම්, iPhone 6 ....

පරීක්ෂණ සාධනය: විකල්ප චෙක්පතක් සමඟ වරක් ධාවනය කර ඇති පරිදි, මෙහි ඉහළට ඔසවා ඇති හා වඩාත්ම මෑත පළ කිරීම් මෙහි ධාවනය විය:

(function(a){
    window.isMobile = (/(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)))
})(navigator.userAgent||navigator.vendor||window.opera);

alert("This browser was found to be a % browser.", window.isMobile ? 'mobile' : 'desktop');

කෙසේ හෝ පහත දැක්වෙන ප්‍රති results ල පහත බ්‍රව්සර් යෙදුම් මත ලබා දෙන ලදි. පිරිවිතර: iPhone 6S, iOS 10.3.1.

සෆාරි (නවතම): එය ජංගම දුරකථනයක් ලෙස අනාවරණය විය.

ක්‍රෝම් (නවතම): එය ජංගම දුරකථනයක් ලෙස හඳුනාගෙන නැත.

SO, මම පසුව ලැන්ටි ( https://stackoverflow.com/a/31864119/7183483) වෙතින් වූ යෝජනාව පරීක්ෂා කර බැලුවෙමි ) , එය නිසි සියලුම iOS උපාංග සඳහා ජංගම, සහ මගේ මැක් සඳහා ඩෙස්ක්ටොප්). එම නිසා, එය දෙවරක් (ජංගම සහ ටැබ්ලට සඳහා) වෙඩි තබන බැවින් මම එය ටිකක් සංස්කරණය කිරීමට කටයුතු කළෙමි. අයිපෑඩ් එකක පරීක්‍ෂා කිරීමේදී මා දුටුවේ එය ජංගම දුරකථනයක් ලෙස නැවත පැමිණීමයි . එය අර්ථවත් වන්නේ ලන්තිගේ පරාමිතීන් නිසායඕනෑම දෙයකට වඩා මෙහෙයුම් පද්ධතිය පරීක්ෂා කරන්න. එම නිසා, මම ටැබ්ලටයේ IF ප්‍රකාශය ජංගම චෙක්පත තුළට ගෙන ගියෙමි, එය ජංගම දුරකථනය නැවත ලබා දෙනු ඇත. දෙකම සුදුසුකම් ඇති බැවින් ජංගම චෙක්පත ඩෙස්ක්ටොප් / ලැප්ටොප් ලෙස නැවත ලබා ගැනීම සඳහා මම වෙනත් වගන්තියක් එක් කළෙමි, නමුත් බ්‍රව්සරය CPU සහ OS සන්නාමය හඳුනා ගන්නා බව දුටුවෙමි. ඒ නිසා ප්‍රකාශයක් වෙනුවට වෙනත් කොටසක් ලෙස එහි නැවත ලබා දුන් දේ මම එකතු කළෙමි. එය වළක්වා ගැනීම සඳහා, කිසිවක් අනාවරණය නොවුනහොත් මම වෙනත් අනතුරු ඇඟවීමේ ප්‍රකාශයක් එක් කළෙමි. බෙලෝ බලන්න, වින්ඩෝස් 10 පරිගණකයේ පරීක්ෂණයක් සමඟ ඉක්මනින් යාවත්කාලීන වේ.

දෝශ නිරාකරණය සහ සාමාන්‍ය සම්පාදනය අතර පහසුවෙන් මාරුවීම සඳහා මම 'debugMode' විචල්‍යයක් ද එක් කළෙමි.

Dislaimer: කිරීමට පූර්ණ ණය Lanti , ද මෙහෙයුම් පද්ධතිය පිරිසිදු වින්ඩෝස් බැවින්, මෙය වින්ඩෝස් ටැබ්ලට් පරිගණක ... ඩෙස්ක්ටොප් / ලැප්ටොප් නැවත වරක් මත පරීක්ෂා කර නැත බව. මම මිතුරෙකු සොයාගත් පසු පරීක්ෂා කර බලමි.

function userAgentDetect() {
    let debugMode = true;
    if(window.navigator.userAgent.match(/Mobile/i)
        || window.navigator.userAgent.match(/iPhone/i)
        || window.navigator.userAgent.match(/iPod/i)
        || window.navigator.userAgent.match(/IEMobile/i)
        || window.navigator.userAgent.match(/Windows Phone/i)
        || window.navigator.userAgent.match(/Android/i)
        || window.navigator.userAgent.match(/BlackBerry/i)
        || window.navigator.userAgent.match(/webOS/i)) {
        if (window.navigator.userAgent.match(/Tablet/i)
            || window.navigator.userAgent.match(/iPad/i)
            || window.navigator.userAgent.match(/Nexus 7/i)
            || window.navigator.userAgent.match(/Nexus 10/i)
            || window.navigator.userAgent.match(/KFAPWI/i)) {
            window.deviceTypeVar = 'tablet';
            if (debugMode === true) {
                alert('Device is a tablet - ' + navigator.userAgent);
            }
        } else {
            if (debugMode === true) {
                alert('Device is a smartphone - ' + navigator.userAgent);
            };
            window.deviceTypeVar = 'smartphone';
        }
    } else if (window.navigator.userAgent.match(/Intel Mac/i)) {
        if (debugMode === true) {
            alert('Device is a desktop or laptop- ' + navigator.userAgent);
        }
        window.deviceTypeVar = 'desktop_or_laptop';
    } else if (window.navigator.userAgent.match(/Nexus 7/i)
        || window.navigator.userAgent.match(/Nexus 10/i)
        || window.navigator.userAgent.match(/KFAPWI/i)) {
        window.deviceTypeVar = 'tablet';
        if (debugMode === true) {
            alert('Device is a tablet - ' + navigator.userAgent);
        }
    } else {
        if (debugMode === true) {
            alert('Device is unknown- ' + navigator.userAgent);
        }
        window.deviceTypeVar = 'Unknown';
    }
}

මෙය මගේ ව්‍යාපෘතියේ මා භාවිතා කරන පිළිගත් පිළිතුරේ es6 වරායක් පමණි . මෙයට ටැබ්ලට් ද ඇතුළත් බව සලකන්න.

export const isMobile = () => {
  const vendor = 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|xda|xiino|android|ipad|playbook|silk/i.test(
      vendor
    ) ||
    /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(
      vendor.substr(0, 4)
    )
  );
};

return 'ontouchstart' in window && window.screen.availWidth < 768

කෙසේ නම්, එය ඉහත පිළිතුර මත පුළුල් වන අතර තිරයේ ප්‍රමාණයද පරීක්ෂා කරයි

ඉහත පිළිතුරු මට ප්‍රයෝජනවත් වන අවස්ථා කිහිපයකට මම මුහුණ දී සිටිමි. ඉතින් මම මේක ආවා. යමෙකුට ප්‍රයෝජනවත් විය හැකිය.

if(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent)
 || screen.availWidth < 480){
//code for mobile
}

එය ඔබගේ භාවිත අවස්ථාව මත රඳා පවතී. ඔබ තිර භාවිතය කෙරෙහි අවධානය යොමු කරන්නේ නම් screen.availWidthහෝ document.body.clientWidthලේඛනය මත පදනම්ව විදැහුම්කරණය කිරීමට අවශ්‍ය නම් ඔබට භාවිතා කළ හැකිය .

Regex භාවිතා කිරීම ( dettemobilebrowsers.com වෙතින් ):

/* eslint-disable */
export const IS_MOBILE = (function (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)
      )
  )
  // @ts-ignore
})(navigator.userAgent || navigator.vendor || window.opera)
/* eslint-enable */

මෙම පශ්චාත් අනෙකුත් පිළිතුරු සහාය හරහා ... ක කෝණයක් වන ශුන්ය මත ජංගම / ටැබ්ලට් සතුව වර්ගය පිළිබඳ චිත්රයක්-ප්රාථමික , ක සඳහා පරීක්ෂණ එසේ කෝණය වන ශුන්ය හා වර්ගය පිළිබඳ භූ-ප්රාථමික සඳහා ඩෙස්ක්ටොප් . වොයිලා:

const orientation = window.screen.orientation
const angle = orientation.angle
const type = orientation.type
if(angle === 0 && type === 'landscape-primary') {
    console.log('desktop')
} else {
    console.log('other')
}