javascript - 正确/错误取决于屏幕尺寸动态？

Question

我正在遵循一个指南，该指南允许 Google map 屏幕根据屏幕尺寸禁用滚动。我唯一挣扎的部分是编写一个代码，当我手动调整屏幕大小时动态更改 True/False 值。

这是我按照说明操作的网站，但我似乎无法编写正确的语法代码来根据屏幕尺寸生成动态 true false 值 https://coderwall.com/p/pgm8xa/disable-google-maps-scrolling-on-mobile-layout

我需要使用的部分代码:

$(window).resize()

然后:

setOptions()

所以我正在努力将它们结合在一起。

我尝试过这样的事情:

var dragging = $(window).width(function resize() {
    if (dragging > 560) {
        return true;
    } else {
        return false;
    }
});

Answer 1

您链接到的文章缺乏重要信息，因为它没有提到 $ 是(大概)jQuery 。但你根本不需要 jQuery。您可以使用 MediaQueryList 来代替。 。它类似于 CSS 中的媒体查询，但它是一个 JavaScript API。

以下是一个未经测试的示例，说明如何将其与 MediaQueryList event listener 一起使用。 。它设置初始值并使用使用 setOptions 的处理程序监听媒体查询的更改。来自 Google map API。

var mql = window.matchMedia('(min-width: 560px)');
var isDraggable = mql.matches;

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    draggable: isDraggable
  });
}

function mqChange(e) {
  map.setOptions({draggable: !!e.matches});
}

mql.addListener(mqChange);