Question

我使用Modernizer.mq方法创建了一个具有悬停效果的导航：

$('ul#mainNav > li').hover(function() {
    if(Modernizr.mq('(min-width: 701px)'))
    {

因为我希望当宽度大于700px时导航的悬停效果和宽度小于700px时点击移动的导航效果。

我使用上面的代码而不是

$('ul#mainNav > li').hover(function() {
    if($( window ).width()> 701)
    {

因为$( window ).width()与我的媒体查询不同。

对于IE＆lt; 8我使用respond.js让我的mediq查询正常工作。但是，我注意到我的悬停不再起作用，因为Modernizr.mq方法不起作用。有没有办法找出是否支持Modernizr.mq方法？

类似的东西：

var mqWorks = checkIfMqWorks();

$('ul#mainNav > li').hover(function() {
   if(mqWorks){
       if(Modernizr.mq('(min-width: 701px)'))
       {...}
       } else {
           if($( window ).width()> 701)
            {...}
       }

Answer 1

您可以在if then语句中使用typeof contruct。

实例http://codepen.io/larryjoelane/pen/NxZKWr

JavaScript的：

//test conditions
var modernizrLoaded = typeof Modernizr === "object";

var modernizrMQLoaded =  typeof Modernizr.mq === "function";

var modernizrMinWidth = Modernizr.mq('(min-width: 10px)');


//debugging tests
console.log(modernizrLoaded);
console.log(modernizrMQLoaded);
console.log(modernizrMinWidth);


//if Modernizr is object that is loaded. It contains an mq function and the test function call for mq returns true
if (modernizrLoaded && modernizrMQLoaded && modernizrMinWidth) {

  console.log("Modernizr is a function and the mq function call returns true.");

} else {

  console.log("false")

}

然后，您可以创建一个函数来调用或只是将代码放在if块中，以便在满足条件时运行，并在else块中不满足条件时放置代码。

如何检查是否支持modernizer.mq方法？

1 个答案: