标签: matchmedia

doSomethingFunc当afterPrint发生时,我需要执行.我的代码在所有浏览器上都运行良好,除了当前的Safari-Versions(OSX上的Safari 10.1和iOS 10.3中的Safari浏览器).似乎没有为这两个浏览器调用事件监听器(至少用于打印).

const mediaQueryPrint = window.matchMedia('print');
mediaQueryPrint.addListener((mql) => {
    if (!mql.matches) {
        setImmediate(doSomethingFunc);
    }
});

window.print();

上面的代码与iOS 10.2的OSX Safari 9.1.2和Safari完美配合.但不是当前的版本.

有人注意到类似的东西吗？或者我是否必须改进当前Safari版本的代码？

我的猜测是,这是一个Safari bug,因为Safari 10.1 changelog章节的可访问性中有相应的注释.

我有一个打印按钮，可以在任何网页上启动打印功能。用户单击该按钮后，该按钮就会隐藏，并显示用户是否已完成打印或在打印窗口中按下关闭按钮。它在 Chrome 中工作正常，但在 Firefox 和 IE 中失败。

<input type="button" onclick="launchPrint()" value= "Print me" />


function launchPrint(){
$(".print-box").hide();
window.print();
}

(function() {
    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (!mql.matches) {
                $(".print-box").show();
            }
        });
    }
}());

我可能缺少什么建议吗？

我正在使用window.matchMedia条件,以避免在移动设备中注入视频.这里说自从Safari 9(我正在测试它)之后,matchMedia将顺利运行,但我的代码完全被忽略了:

if ( window.matchMedia("(min-width: 1025px").matches) {
   console.log('match');

   document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);

   function initialiseMediaPlayer() {

      (stuff here...)

   }

}

此代码适用于Chrome,Chromium,Firefox,IE和Edge.

有没有人有类似的问题？

我有以下代码,当屏幕大小770px及以下(由断点确定)时,它可以正常工作:

    var handleMatchMedia = function (mediaQuery) {
      if (mediaQuery.matches) {

         $j(".view-all a").removeClass("button");
         $j(".view-all").removeClass("view-all");

    } else {

        $j(".view-all a").addClass("button");
        $j(".view-all").addClass("view-all");
    }
},

mql = window.matchMedia('all and (max-width: 770px)');

handleMatchMedia(mql); 
mql.addListener(handleMatchMedia); 

问题是当窗口调整大小时770px,我失去了我的课程.

如何在窗口调整大小时更改类？

我正在尝试编写一些javascript,它将更改某些浏览器断点处JS配置对象中保存的某些值.

我已经在配置对象中存储了window.matchmedia测试,然后我循环遍历这个对象的键,为每个测试添加一个事件监听器,如下所示:

Object.keys(config.mediaQueries).map((key) =>{
     config.mediaQueries[key].addListener(function(){
         console.log("breakpoint change");
     });
});

https://codepen.io/decodedcreative/pen/YQpNVO

但是,当调整浏览器大小并运行这些侦听器回调函数时,它们似乎运行两次.在您的控制台打开的情况下检查上面的CodePen,您将看到我的意思.

有谁知道我在这里做错了什么？

我试图jQuery在一个页面上使用2个导航脚本(Superfish用于桌面和FlexNav 移动设备).我目前正matchMedia与polyfillPaul Irish 一起使用来回应CSS3媒体查询状态的变化JavaScript.

目前的代码只实现了总体目标的50%.如果您最初访问网页的窗口大小等于或大于999px宽,那么您将获得Superfish并且如果您最初访问窗口大小小于999px的网页,那么您将获得FlexNav.当您将窗口调整大小或低于999px时,会发生此问题,因为两个脚本都变为活动状态.

// media query event handler
if (matchMedia) {
    var mq = window.matchMedia("(min-width: 999px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}
// media query change
function WidthChange(mq) {
    if (mq.matches) {
        $("ul.sf-menu").superfish({
            delay: 350,
            speed: 400,
        });
    } else {
        $("ul.flexnav").flexNav({
            'animationSpeed': '250',
            'transitionOpacity': true,
            'buttonSelector': '.menu-button',
            'hoverIntent': false
        });
    }
}

尽管我希望能够与之合作matchMedia,但我对所有建议持开放态度.

更新:感谢Stephan的建议,我现在有以下代码:

jQuery(document).ready(function () {
    // add destroy function …

我正在使用matchMedia（）。addListener来检测Safari中的暗/亮模式主题首选项更改，但是在WebStorm中，使用addListener标记为已弃用，只是说要参考文档以替代它。

我已经通读了MDN文档，但我不明白我应该在addEventListener中侦听哪种事件类型来代替addListener？

window.matchMedia("(prefers-color-scheme: dark)").addListener(() => this.checkNative());
window.matchMedia("(prefers-color-scheme: light)").addListener(() => this.checkNative());

我正在构建一个插件，为了打开/关闭某些行为，我正在使用 matchMedia 函数。但是在回调函数中，我需要传递一个参数来保留对此的正确引用。但是，当我尝试将参数传递给回调函数时，它说我的整个 addListener 回调函数未定义。当我尝试将其绑定到回调函数时，这同样适用。

TypeError: this.mediaQueryCheck(...) is undefined

关于 addListener ，我一定缺少一些非常明显的东西，所以现在我只包含我的代码的非功能示例：

     MyPlugin.prototype = {
        version :   '0.0.1',
        mediaQuery : window.matchMedia(defaults.breakpoint),

        mediaQueryCheck : function(mql){

             if(mql.matches === true){ // if our mediaQuery matches
                this.evalScrollPosition();
                if(this.isLaunched === false){
                    // attach scroll handlers

                    $(window).on('scroll resize', this.evalScrollPosition.bind(this));
                    this.isLaunched = true;
                }
            }
            else if(mql.matches === false){ // if the mediaQuery isn't active atm
                if(this.isLaunched === true){
                // remove handlers
                $(window).off('scroll resize', this.evalScrollPosition.bind(this));
                    this.isLaunched = false;
                }
                this.fixedStatus = '';
                this.unstyleContainer(); // remove positioning set …

首先,我想强调一下,我是一个javascript编程的新手,我正在尝试尽可能多地从这里学习.阅读查询js api,文档以及源代码.我想知道inquire js与传统的matchmedia和resize事件监听器之间有什么区别.

链接到查询js:http://wicky.nillia.ms/enquire.js/

将不胜感激任何贡献

我正在使用matchMedia API来确定javascript中的视口，因此我可以最大程度地减少dom操作的发生。

display: none我没有使用v-ifVue 的指令来确定是否将元素插入DOM，而不是在各处使用。

我已经这样设置了：

resize() {
    this.mobile = window.matchMedia('(max-width: 767px)').matches;
    this.tablet = window.matchMedia('(max-width: 767px)').matches;
    this.desktop = window.matchMedia('(min-width: 992px)').matches;
}

可以使用移动Match媒质查询，但是如何确定平板电脑的尺寸呢？我想知道是否可以在matchMedia查询中合并max-width和min-width值。

我当然可以做这样的事情：

resize() {
    this.mobile = window.matchMedia('(max-width: 767px)').matches;
    this.desktop = window.matchMedia('(min-width: 992px)').matches;
    this.tablet = !this.mobile && !this.desktop;
}

我想知道这是否像这样正确设置。