调用 javascript 函数检查媒体答案

【问题标题】：calling javascript function checking media调用 javascript 函数检查媒体
【发布时间】：2014-06-04 00:27:29
【问题描述】：

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

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

适用于笔记本电脑和台式机 @media 仅屏幕和（最小宽度：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;
        }
    }

从概念上讲，这就是我想要实现的，这在语法上绝对不正确

任何帮助都将受到高度评价

【问题讨论】：

标签： javascript jquery

【解决方案1】：

试试下面的代码。您编写的代码在语法上是错误的。希望下面的代码对你有所帮助。

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;
     }
}

【讨论】：

【解决方案2】：

获取窗口的宽度怎么样？

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

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

【讨论】：

【解决方案3】：

您可以使用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;
    }
}

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

【讨论】：

【解决方案4】：

你必须使用以下语法

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

            });
</script>

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

这很好，但我宁愿不要只为一件小事使用现代化工具。它的另一个包含。但这真的很好
该代码在 Github 上可用，因此如果您还想支持旧版浏览器，您可能仍想查看它。它有一些漂亮的回退（并且还检查来自 Microsoft 的 matchMedia 的前缀版本）。 github.com/Modernizr/Modernizr/blob/master/src/…