CODEWITHSUNDEEP
jquery
James
James

Reputation: 1

Jquery to detect mobile and show code based upn conditions

I am trying to run a code in a single page which is a html page that if the website is opening in mobile or desktop, i found this tutorial but not sure how to use it

http://magentohostsolution.com/3-ways-detect-mobile-device-jquery/

<canvas id="low-poly"></canvas>

  <!-- YOUTUBE PLAYER -->
  <div id="video" data-video="ClIBmBT9clU" data-mute="true"></div>
  <!-- /YOUTUBE PLAYER -->

use youtube if it is not mobile and ipad or tablet, other than that use it

I am really a noob in programming, just started

Upvotes: 0

Views: 39

Answers (1)

Celestine
Celestine

Reputation: 448

You can use it like this:

if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) { //check if mobile and invert result
  console.warn("Desktop detected");
  $("#youtube").html(`<div id="video" data-video="ClIBmBT9clU" data-mute="true"></div>`); //append player
}
strong.warning {
  color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<div id="youtube">
  <strong class="warning">Please use desktop</strong>
</div>

Or like this: 

const isMobile = (function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
})(); //create mobile-detection function and use it
if (!isMobile) { //check if mobile and invert result
  console.warn("Desktop detected");
  $("#youtube").html(`<div id="video" data-video="ClIBmBT9clU" data-mute="true"></div>`); //append player
}
strong.warning {
  color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<div id="youtube">
  <strong class="warning">Please use desktop</strong>
</div>

Also desktop browser do not have orientation property, so you can also use this (as mentioned here):

const isMobile = typeof window.orientation !== "undefined";

Upvotes: 1

Related Questions