真/假取决于动态屏幕尺寸

Question

我遵循的指南允许谷歌地图屏幕根据屏幕尺寸禁用滚动。我唯一挣扎的部分是编写一个代码，当我手动调整屏幕大小时动态更改 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事件侦听器一起使用。它会设置初始值，并使用使用 Google 地图 API 中的 setOptions 的处理程序侦听媒体查询的更改。

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);

Answer 2

您可以将事件侦听器添加到 resize 事件，并在窗口大小更改时设置变量的值：

var dragging = false;
window.addEventListener('resize', function(event) {
  dragging = window.innerWidth > 560;
});

由于您提到要在窗口大小扩展某个值时禁用滚动，因此这样做可能会更容易。如果您尝试这样做，您可以在控制台中看到，每当调整窗口大小时，值都会更改）：

window.addEventListener('resize', function(event) {
  console.log(window.innerWidth);
  if (window.innerWidth > 560) {
    // disable scrolling or do whatever you want to do
  }
});

顺便说一句，在您的代码中，您可以这样做：

 if (dragging > 560) {
     return true;
 } else {
     return false;
 }

您可以将其简化为：

return dragging > 560

这是完全相同的。

Answer 3

您可以使用此函数在调整屏幕大小时获取宽度和高度。

$(window).resize(function() {
    $windowWidth = $(window).width();
    $windowHeight = $(window).height();
    // run other functions or code
});

但是，如果您只想根据屏幕大小显示/隐藏 html 元素，您也可以使用纯 html/css。

<div id="maps"></div>

Css：

@media only screen and (max-width: 560px) {
    #maps {
        display: none;
    }
}

Answer 4

可以使用

matchMedia 函数在媒体查询状态发生变化时运行回调

var mql = window.matchMedia('(min-width: 700px)');
function mediaHandler(e) {
   if (e.matches) {
      /* the viewport is more than 700 pixels wide */
   } else {
      /* the viewport is 700 pixels wide or less */
   }
}
mql.addListener(mediaHandler);