Question

我有一个ipad的媒体查询css块

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
}

适用于笔记本电脑和台式机 @media only screen 和（min-width：1224px）{ }

我有一个js函数，根据我所使用的设备需要有不同的参数。所以我们这样说吧

if(@media only screen && (min-width : 1224px)){
    function operation(){
       var x = 2;
    }
}




if(@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)){
        function operation(){
           var x = 7;
        }
    }

从概念上讲，这就是我想要实现的，这在语法上肯定是错误的

任何帮助都会得到很高的评价

Answer 1

不确定它是如何在幕后工作的（现在我懒得查找）但是Modernizr - 库有一个名为Modernizr.mq(string)的方法来评估媒体查询并返回一个布尔值。

它可以像这样使用（假设已加载了modernizr并且可以使用mq方法）。

if(Modernizr.mq('@media only screen && (min-width : 1224px)')) {
  function operation(){
    var x = 2;
  }
}

Answer 2

尝试以下代码。你写的代码在语法上是错误的。我希望下面的代码可以帮到你。

if (window.matchMedia('only screen and (min-width: 1224px)').matches) {
   function operation(){
      var x = 2;
   }

} 

if(window.matchMedia('only screen and (min-width: 768px) and (max-width: 1024px)').matches) {
     function operation(){
       var x = 7;
     }
}

Answer 3

您必须使用以下语法

<script>
         $(document).ready(function () {
         var mql = window.matchMedia("(min-width: 480px)");
         if (matchMedia('all and ').mql) {
                function operation(){
                   var x = 2;
                }
            }

            });
</script>

Answer 4

您可以使用this答案中提到的功能来实现您想要的功能，例如：

var viewportDimensions = getViewport(), viewportWidth = viewportDimensions[0], viewportHeight = viewportDimensions[1];
if(viewportWidth > 1224)
{
   function operation(){
       var x = 2;
    }
}
if(viewportWidth > 768 && viewportWidth < 1024)
{
   function operation(){
       var x = 2;
    }
}

此方法适用于所有浏览器，不需要任何外部库依赖项。

Answer 5

如何获得窗口的宽度呢？

var windowWidth = $(window).width();
if(windowWidth > 1224px){
    function operation(){
      var x = 2;
    }
}

if(windowWidth > 768px) && windowWidth < 1024px){
    function operation(){
       var x = 7;
    }
}

调用javascript函数检查媒体

5 个答案: