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

Question

我为此使用画布。 我有一幅图片，当用户单击我指定的元素之一时，它将突出显示该元素描述的图像部分。

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

这是相关的html代码

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

我的工作效果很好，但是对于移动设备而言，图片太大了。 所以我把它放在我的CSS中：

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

这样一来，画布（id = adcanvas）在移动设备中消失了，而是显示了较大图像的缩略图（id = adpics）。

问题是javascript的高亮显示仍然出现。 我已经尝试过IF ELSE语句，告诉它仅在窗口> 826时才运行，但是这只会导致整个脚本无法在任何尺寸的屏幕上运行。

如何告诉我不要在移动设备上运行#highlight？

链接到目前为止运行的页面。

Answer 1

在CSS文件中：

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

在jQuery / Javascript文件中：

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

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


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