Question

我有一个链接，正常情况下，当我点击它时，它会给我一个alert() （使用jquery）。

HTML：

<a class="link" href="www.example.com">link</a>

JS：

$(".link").click(function() {
    alert('clicked');
    return false;
});

CSS：

@media (min-width: 980px)
{
  // In this width, when user click on that link,
  // I want to open www.eample.com
}

现在我的问题是：我如何确定客户端的宽度是否小于或大于980像素？

Answer 1

您可以使用$(window).width()

$(".link").click(function() {
    if($(window).width() >= 980){  
       alert('clicked');
       return false;
     }
});

Answer 2

您无法使用CSS停用JavaScript，您必须使用JavaScript并使用$(window).width()检查宽度

$(".link").click(function() {
    if ($(window).width() >= 980) {
        alert('clicked');
        return false;
    }
});

Answer 3

我不确定你想做什么但是如果我理解正确你想要一些javascript代码运行时客户端的宽度小于/大于一定数量的像素。

如果是这种情况，您必须在点击回调函数中检查客户端屏幕是否大于/小于980px。

$(".link").click(function () {
  if (window.innerWidth > 980) {
    alert('clicked');
    return false;
  }
});

Answer 4

我认为匹配媒体也很可爱：

var mq = window.matchMedia('@media (min-width: 980px)');
var link = document.querySelector('.link');
link.href = mq.matches ? "http://www.example.com" : "";

修改

哦，正如@Oscar指出：如果你担心合并 ~16％ 市场分享 （oct / 2015）的IE8 / IE9，请使用所选答案中详述的jquery方法。

如何为特定宽度停用JS代码？

4 个答案: