Question

我正在建立一个响应式网站，我正在使用modernizr来改进页面。 Modernizr对我来说很新鲜。

问题是我必须调整页面大小以查看我所做的更改。

我想以两种方式更改页面，当有人调整大小（我已经有了），以及重新加载页面时。因为如果某人在某个设备中打开该页面，我的更改将无法正常工作。

我该怎么做？

    function checkMq() {
        if (Modernizr.mq('only screen and (min-width: 1168px)')) {

            if ($('.leftside').hasClass('active')) {
                $(".m-contact").css("visibility", "visible");
            } else {

            }


        }
        if (Modernizr.mq('only screen and (max-width: 1169px)')) {

            if ($('.leftside').hasClass('active')) {
                $(".m-contact").css("visibility", "hidden");
            } else {
                $(".m-contact").css("visibility", "visible");
            }


        }
    }


    $(function() {
        checkMq();

        $(window).resize(function() {
            checkMq();
        });

    });

Answer 1

您可以使用以下命令在脚本末尾强制调整大小：

$(window).resize();

或者使用Timeout在200ms后设置它，例如使用：

setTimeout(function(){
   $(window).resize();
}, 200);

这会强制窗口调整大小，如果我理解正确，将会应用更改。

Answer 2

您已经在DOM ready事件上调用函数 checkMq ，因此它应该毫无疑问地运行。是什么让你觉得它不起作用？

即使我没有调整页面大小，我如何保持使用Modernizr所做的更改

2 个答案: