2

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

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

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

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

CODE HERE

    }
});

我感觉有一个错误或我不知道的东西。请问有人能把我从痛苦中解救出来吗？

谢谢

4

6 回答 6

17

IE9 中的简单调试

  1. 打开 IE9
  2. 按 F12 打开开发者窗口
  3. 单击“脚本”选项卡
  4. 单击右侧窗格中的“控制台”
  5. 尝试加载您的页面

您将看到以下错误：

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编写的，他是 Web 技术领域的知名人物。

关于条件 IE 的注意事项包括

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

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

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

于 2013-05-09T20:49:48.440 回答
2

j08691 发现了你遇到的问题。

如果您需要matchMedia使用 IE9 及以下版本、Firefox 6 及以下版本或 Safari 5.1 及以下版本，则必须对其进行填充。这是 matchMedia 的 polyfill，可让您在较旧的浏览器上使用它。

请注意，这不是jQuery 问题，此问题与matchMedia 浏览器支持有关

于 2013-05-09T20:39:41.513 回答
0

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

于 2013-05-09T20:41:41.143 回答
0

那是因为matchMedia仅适用于 IE10。

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

于 2013-05-09T20:36:58.047 回答
0

Andrew Martinez 的回答相当彻底和正确，我个人认为它非常有用。

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

<![if lt IE 10]>
<script src="scripts/matchMedia.js"></script>
<![endif]>
于 2014-04-28T22:47:55.447 回答
0

我只是检查浏览器是否是 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



    }

});
于 2016-07-07T08:32:47.127 回答