如何获取JavaScript在桌面而不是移动设备上运行功能

Question

I'm using canvas for this. I have a picture and when a user clicks one of the elements I've specified, it highlights the part of the image that's described by that element.

        $(function() { 
        $("#monsterTop").click(function() {
            $("#container").css("position", "relative");
            $("#highlight").css("position", "absolute")
                            .css("width", "413px")
                            .css("height", "32px")
                            .css ("top", "0px")
                            .css("left", "0px")
                            .css("background", "rgba(255, 0, 0, 0.4)"); 
               });
          });

And here's the relevant html code

   <div id="container">
    <img src="../pictures/img/default.png" alt="Default page layout" class="adcanvas"/>
    <div id="highlight"></div>
</div>

I've got that working great, but the picture is too big for mobile. So I put this in my CSS:

@media(max-width: 826px){
    .adpics{
    display:inline-block;
    width: 100%;
    max-width: 500px;
    }
.adinfo{
    display:inline-block;
    width:100%;
    }
    .adcanvas{
        display:none;
    }
}

That makes the canvas (id=adcanvas) disappear in the mobile and shows thumbnails of the larger image instead (id=adpics).

The problem is that the highlighting from the javascript still shows up. I've tried an IF ELSE statement telling it to run only if the window is >826, but it just causes the entire script to not run on any size screen.

How do I tell it not to run #highlight in mobile?

Link to the page as it runs so far.

Answer 1

In CSS file:

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

In jQuery/Javascript file:

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

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


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