在响应式设计中有条件地加载javascript

Conditionally loading javascript in responsive design

本文关键字：有条件 加载 javascript 响应      更新时间：2023-09-26

我正在尝试做一些我认为应该非常简单的事情，但我还没有找到解决方案的简单解释。

我正在构建一个响应式网站，它首先是移动的（默认宽度为320像素）。在这个小分辨率下，网站是一列，我很乐意允许每个单独的"盒子"扩展或收缩到里面内容的自然高度。

然而，在网站扩展到三列的较大分辨率下，我想添加一个小的Javascript函数来均衡每列框的高度。我所说的功能是这样的：

    jQuery(document).ready(function() {
    setHeight('#inner-footer .widget-area');
});
var maxHeight = 0;
function setHeight(column) {
    //Get all the element with class = col
    column = $(column);
    //Loop all the column
    column.each(function() {       
        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });
    //Set the height
    column.height(maxHeight);
}

我找到了不同的方法来做我所说的事情。

  1. 我可以使用modernizr"load"函数（形式上是yesnope.js）
  2. 使用包含Nicholas Zakas"isMedia"函数的自定义函数，如本链接中所述媒体特定Javascript或
  3. 使用中的"screenWidth"变量的自定义javascript函数
    var screenWidth = (screen.width < 768) ? true : false;
    如真实世界中的媒体查询中所述

由于我对javascript的了解有限，我一直无法真正编写代码，使这些方法中的任何一种都适用于我的脚本。有人能帮我吗？

我对这种方法没有特别的偏好，我只希望它能跨浏览器等工作。我的感觉是modernizr方法是在大多数用例中实现这种功能的最健壮和稳定的方法，但我不完全确定。我从未修改过modernizr，所以我不确定如何编写以及将自定义加载函数放在哪里。

有人对modernizr方法或任何其他解决方案（或其他什么）有想法和特定代码吗？我非常感谢你的帮助。

Modernizr可以使用Modernizr.mq（）函数检查媒体查询是否适用

你把你想让它像这个一样匹配的媒体查询传给它

if(Modernizr.mq('all and (min-width: 768px)')) {
    // Equal height code here
}

这里，一旦最小宽度超过768px，就会调用函数内部的代码，所以对您来说，是等高代码。

您可以尝试使用matchMedia，这将允许您根据媒体查询加载特定的js。

https://developer.mozilla.org/en/DOM/window.matchMedia

Paul Irish一直致力于一些聚填充

https://github.com/paulirish/matchMedia.js/

希望这能帮助

Ian

相关文章：