JS détecter si mobile et définir la condition

Question

J'ai une fonction qui détermine la largeur de ma timeline. Je veux définir la largeur pour les ordinateurs de bureau et les appareils mobiles séparément. Comment puis-je les écrire que si le bureau utilise donc ce code si mobile, utilisez un autre code?

If(mobile) { use js function for mobile } else { use js function for desktop }

Voici js fucntion pour le bureau

\t function setTimelineWidth(timelineComponents, width) { 
 
//Line 3 is set width 100% 
 
\t \t \t totalWidth = $(window).width((timelineComponents['timelineDates'].length * 100)); 
 
\t \t \t //} 
 
\t \t timelineComponents['eventsWrapper'].css('width', totalWidth+'px'); 
 
\t \t updateFilling(timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents['fillingLine'], totalWidth); 
 
\t \t updateTimelinePosition('next', timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents); 
 
\t 
 
\t \t return totalWidth; 
 
\t }

Et voici fonction js pour la largeur mobile

\t function setTimelineWidth(timelineComponents, width) { 
 
\t \t var timeSpan = daydiff(timelineComponents['timelineDates'][0], timelineComponents['timelineDates'][timelineComponents['timelineDates'].length-1]), 
 
\t \t \t timeSpanNorm = timeSpan/timelineComponents['eventsMinLapse'], 
 
\t \t \t timeSpanNorm = Math.round(timeSpanNorm) + 4, 
 
\t \t \t totalWidth = timeSpanNorm*width; 
 
\t \t timelineComponents['eventsWrapper'].css('width', totalWidth+'px'); 
 
\t \t updateFilling(timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents['fillingLine'], totalWidth); 
 
\t \t updateTimelinePosition('next', timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents); 
 
\t 
 
\t \t return totalWidth; 
 
\t }

Answer 1

Changer votre code à ce

 var setTimelineWidth;//this is going to be your function based on device 
     function IsMobile() { 
      var Uagent = 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(Uagent)||/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(Uagent.substr(0,4))); 
     }; 
     if (IsMobile()) 
     { 
      setTimelineWidth = function(timelineComponents, width) { 
      //Line 3 is set width 100% 
      totalWidth = $(window).width((timelineComponents['timelineDates'].length * 100)); 
      //} 
      timelineComponents['eventsWrapper'].css('width', totalWidth + 'px'); 
      updateFilling(timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents['fillingLine'], totalWidth); 
      updateTimelinePosition('next', timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents); 

      return totalWidth; 
      } 
     } 
     else 
     { 
      setTimelineWidth = function(timelineComponents, width) { 
      var timeSpan = daydiff(timelineComponents['timelineDates'][0], timelineComponents['timelineDates'][timelineComponents['timelineDates'].length - 1]), 
       timeSpanNorm = timeSpan/timelineComponents['eventsMinLapse'], 
       timeSpanNorm = Math.round(timeSpanNorm) + 3, 
       //totalWidth = (timelineComponents['timelineDates'].length * 100) 
       totalWidth = $(window).width((timelineComponents['timelineDates'].length * 100)); 
      timelineComponents['eventsWrapper'].css('width', totalWidth + 'px'); 
      updateFilling(timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents['fillingLine'], totalWidth); 
      updateTimelinePosition('next', timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents); 

      return totalWidth; 
      } 
     } 

Answer 2

if(typeof window !== 'undefined'){ 
     var ua = 'navigator' in window && 'userAgent' in navigator && 
      navigator.userAgent.toLowerCase() || ''; 
    }  
    var judge = { 
      isMobile: function() { 
         return !!ua.match(/(iPhone|iPod|android|ios|iPad|windows 
      phone|tablet)/i); 
        }, 
        isPc: function() { 
         return !judge.isMobile(); 
        } 
     }   

     if(judge.isMobile()){ 
     //mobile 
     }else(judge.isPc()){ 
     //pc 
     } 

plus, j'ai écrit aussi un colis de MNP pour juger, https://github.com/hawx1993/judge