Question

我的网站是http://www.thetruenorth.co.uk/

我无法让JQuery在IE9中的网站上工作。它可以在其他所有浏览器中正常工作。

我意识到下面是代码，它检测是否是一个小屏幕（移动设备），阻止它工作。如果我删除这一位，一切正常。我使用这个是因为我不知道我是如何禁用移动设备的JS，而是将它保留在桌面上。建议欢迎。

$(document).ready(function(){
if(matchMedia('only screen and (max-width: 1023px)').matches)
{}
else { 

CODE HERE

    }
});

我感觉有一个我不知道的错误。请有人能让我摆脱苦难吗？

由于

Answer 1

IE9中的简单调试

打开IE9
按F12打开“开发者”窗口
点击“脚本”标签
点击右侧窗格中的“控制台”
尝试加载页面

您将看到以下错误：

SCRIPT5009: 'matchMedia' is undefined 
scripts.js, line 2 character 2

IE9不支持'matchMedia'功能，因此不定义它。试图在代码中引用它会在此时完全停止执行JavaScript，因为它不知道如何处理对未定义的内容的引用。

发生了什么

jQuery正在您的页面上加载。您可以通过在控制台输出下方的文本输入行中键入“$”来确认这一点，然后按Enter键。控制台将输出一些有关如何定义$的数据。这是jQuery加载的一个非常好的标志。它并非在所有情况下都具有决定性，但对于这一点我们已经确定了。

正在发生的是你的回调正在运行onDomReady（通过$（document）.ready（...）），但它在第一行是错误的。此错误导致其余回调不执行。

验证功能支持

您可以使用caniuse.com来查看哪些浏览器支持功能（JS，CSS等）。在这种情况下：http://caniuse.com/matchmedia。您会注意到IE10是第一个支持matchMedia功能的版本。您可以假设在任何早期版本中，默认情况下您不会使用matchMedia，并且引用它会导致错误。

您现在可以做什么

在caniuse.com网站上，顶部是一个名为“资源”的水平列表。在这个领域，您通常会找到修补不支持特定功能的浏览器的方法。

在matchMedia的情况下，有一个指向'polyfill'的链接，它将使用自定义js来模拟matchMedia的功能。网址为：https://github.com/paulirish/matchMedia.js/。

Polyfills有时会限制或使用它们，所以要小心。值得注意的是，matchMedia polyfill是由Paul Irish编写的，他是网络技术的公众人物。

关于条件IE包含的说明

IE支持条件注释，因此您可以仅为特定版本的IE包含上面定义的polyfill;在你的情况下任何＆lt; IE10。这在MDN上记录在此：http://msdn.microsoft.com/library/ms537512.aspx

<!--[if lte IE 10]]>
    <script src="polyfill.js"></script>
<![endif]-->

这样做是为了尽可能在可能的情况下使用浏览器的实现（通常更快，可能具有更多功能）和仅在需要时使用polyfill。

Answer 2

j08691发现了你的问题。

如果您需要matchMedia使用IE9及以下版本，或Firefox 6及以下版本或Safari 5.1及以下版本，则必须使用它。 Here is a polyfill for matchMedia，可让您在旧浏览器上使用它。

注意，这是不 jQuery问题，这个问题是matchMedia browser support

Answer 3

那是因为matchMedia仅适用于IE10。

参考：https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia

Answer 4

使用PHP可能会更好。即可能无法正确运行matchMedia。我总是在服务器端保留这样的东西，因为对于任何客户端都会运行相同的东西。如果您正在使用PHP，请尝试get_browser()。写一个快速if语句真的很容易。如果需要帮助，请查看示例。

Answer 5

安德鲁·马丁内斯的回答是相当彻底和正确的，我个人认为它非常有用。

在IE9中获取matchMedia方法的标记如下所示

<![if lt IE 10]>
<script src="scripts/matchMedia.js"></script>
<![endif]>

Answer 6

我只是检查浏览器是否为Chrome，然后从github添加matchMedia代码，请看下面的内容：

$(document).ready(function() {
    var isChrome = !!window.chrome;
    if (isChrome == true) {

        //do this for chrome

    } else if (isChrome != true) {

        //do this for all other browsers including IE

        //so copy and paste current matchMedia.js script form here https://github.com/paulirish/matchMedia.js/blob/master/matchMedia.js like below

        /*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */

        window.matchMedia || (window.matchMedia = function() {
            "use strict";

            // For browsers that support matchMedium api such as IE 9 and webkit
            var styleMedia = (window.styleMedia || window.media);

            // For those that don't support matchMedium
            if (!styleMedia) {
                var style       = document.createElement('style'),
                    script      = document.getElementsByTagName('script')[0],
                    info        = null;

                style.type  = 'text/css';
                style.id    = 'matchmediajs-test';

                script.parentNode.insertBefore(style, script);

                // 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
                info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;

                styleMedia = {
                    matchMedium: function(media) {
                        var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';

                        // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
                        if (style.styleSheet) {
                            style.styleSheet.cssText = text;
                        } else {
                            style.textContent = text;
                        }

                        // Test if media query is true or false
                        return info.width === '1px';
                    }
                };
            }

            return function(media) {
                return {
                    matches: styleMedia.matchMedium(media || 'all'),
                    media: media || 'all'
                };
            };
        }());

        //below you can add your own matchMedia code



    }

});

JQuery没有在IE9中加载

6 个答案: