针对javascript的“媒体查询” - 针对不同视口高度/宽度的不同代码 [英] 'Media-queries' for javascript - different code for different viewport height/widths

问题描述

问题

我正在使用javascript来计算元素的宽度，以实现我所追求的布局。问题是，我不想在较小的屏幕尺寸上加载代码（例如，当屏幕宽度小于480px时）。我希望这可以在加载和浏览器/视口调整大小时工作。

I'm using javascript to calculate widths of elements to achieve the layout I'm after. The problem is, I don't want to load the code on smaller screen sizes (when the screen width is less than 480px for example). I'd like this to work on load and on browser/viewport resize.

我认为小屏幕设备是默认设置并从那里开始工作。因此，默认情况下不会调用以下脚本，如果浏览器宽度大于480px（例如），则会调用以下脚本：

I'd consider small screen devices 'the default' and working up from there. So, none of the following script is called by default, then if the browser width is greater than 480px (for example), the following script would be called:

代码

$(document).ready(function() {

    //Get the figures width
    var figure_width = $(".project-index figure").css("width").replace("px", "");

    //Get num figures
    var num_figures = $(".project-index figure").length;

    //Work out how manay figures per row
    var num_row_figures = Math.ceil(num_figures / 2);

    //Get the total width
    var row_width = figure_width * num_row_figures;

    //Set container width to half the total
    $(".project-index").width(row_width);

    x = null;
    y = null;

    $(".project-index div").mousedown(function(e) {
        x = e.clientX;
        y = e.clientY;
    });

    $(".project-index div").mouseup(function(e) {
        if (x == e.clientX && y == e.clientY) {
            //alert($(this).next().attr("href"));
            window.location.assign($(this).next().attr("href"));
        }
        x = y = null;
    });

});

// Drag-on content
jQuery(document).ready(function() {
    jQuery('#main').dragOn();
});

额外位

较大屏幕上的细微差别与浏览器/视口高度有关。这是关于这一行：

The slight difference on larger screens is to do with the browser/viewport height. This is in regards to the line:

var num_row_figures = Math.ceil（num_figures / 2）;

你可以看到一旦计算得到一个值，就把它除以2.我只想在浏览器/视口高度超过一定数量时发生这种情况 - 比如600px。

You can see once the calculation has a value, it divides it by 2. I only want this to happen when the browser/viewport height is above a certain amount - say 600px.

我很高兴这是第一个状态，如果高度大于600px，则值除以2，如果它更容易。

I'd be happy with this being the 1st state and then the value is divided by 2 if the height is greater than 600px if it's easier.

任何人都可以帮助我/阐明如何以这种方式管理我的脚本。我知道有用于管理CSS的媒体查询，但我似乎无法找到任何有关如何以这种方式管理javascript的资源 - 希望有人可以提供帮助。

Can anyone help me/shed some light on how to manage my script this way. I know there's media queries for managing CSS but I can't seem to find any resources for how to manage javascript this way - hope someone can help.

干杯，
Steve

Cheers, Steve

推荐答案

您可以使用 window.matchMedia ，这是媒体查询的javascript等价物。 matchMedia调用会创建一个 mediaQueryList 对象。我们可以查询mediaQueryList对象匹配属性以获取状态，并使用 mediaQueryList.addListener 附加事件处理程序来跟踪更改。

You can use window.matchMedia, which is the javascript equivalent of media queries. The matchMedia call creates a mediaQueryList object. We can query the mediaQueryList object matches property to get the state, and attach an event handler using mediaQueryList.addListener to track changes.

我在小提琴上添加了一个关于在加载和调整大小时使用matchMedia的示例。更改左下窗格的高度和宽度（使用边框），并查看两个查询的状态。

I've added an example on fiddle of using matchMedia on load and on resize. Change the bottom left pane height and width (using the borders), and see the states of the two queries.

这是我使用过的代码：

<div>Min width 400: <span id="minWidth400"></span></div>
<div>Min height 600: <span id="minHeight600"></span></div>

var matchMinWidth400 = window.matchMedia("(min-width: 400px)"); // create a MediaQueryList
var matchMinHeight600 = window.matchMedia("(min-height: 600px)"); // create a MediaQueryList

var minWidth400Status = document.getElementById('minWidth400');
var minHeight600Status = document.getElementById('minHeight600');

function updateMinWidth400(state) {
    minWidth400Status.innerText = state;
}

function updateMinHeight600(state) {
    minHeight600Status.innerText = state;
}

updateMinWidth400(matchMinWidth400.matches); // check match on load

updateMinHeight600(matchMinHeight600.matches); // check match on load

matchMinWidth400.addListener(function(MediaQueryListEvent) { // check match on resize
    updateMinWidth400(MediaQueryListEvent.matches);
});

matchMinHeight600.addListener(function(MediaQueryListEvent) { // check match on resize
    updateMinHeight600(MediaQueryListEvent.matches);
});

这篇关于针对javascript的“媒体查询” - 针对不同视口高度/宽度的不同代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！