Javascript 根据屏幕大小动态判断正确/错误？

我遵循一个指南，允许谷歌地图屏幕根据屏幕大小禁用滚动。我唯一努力的部分是编写一个代码，在手动调整屏幕大小时动态更改真/假值

这是我按照说明编写的网站，但我似乎无法根据屏幕大小编写正确的语法代码来生成动态真假值

我需要使用的部分代码：

$(window).resize()

然后：

setOptions()

所以我努力把它们结合在一起

我试过这样的方法：

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

---

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

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

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

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

---

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

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

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

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

---

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

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

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

顺便说一句，在您的代码中，您可以执行以下操作：

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

您可以将其简化为：

return dragging > 560

---

这是完全相同的。

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

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

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

顺便说一句，在您的代码中，您可以执行以下操作：

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

您可以将其简化为：

return dragging > 560

这完全相同。

只要媒体查询状态发生更改，您就可以使用运行回调

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

当媒体查询状态更改时，您可以使用运行回调

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

---

您链接到的文章缺少重要信息，因为它没有提到

$

可能是。但您根本不需要jQuery。 您可以使用的是。它类似于CSS中的媒体查询，但它是一个JavaScript API

下面是一个未经测试的示例，说明了如何将其用于。它设置初始值，并通过使用Google Maps 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);

---

您链接到的文章缺少重要信息，因为它没有提到

$

可能是。但您根本不需要jQuery。 您可以使用的是。它类似于CSS中的媒体查询，但它是一个JavaScript API

下面是一个未经测试的示例，说明了如何将其用于。它设置初始值，并通过使用Google Maps 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);

---

---

为什么“拖动”既有布尔值又有数字值（550）？我的印象是，如果val为true或false，它会将其中一个传递给拖动？根据本例中屏幕大小大于560然后为真的条件，否则可以将函数核心替换为：return（拖动>560）；为什么“拖动”既有布尔值又有数字值（550）？我的印象是，如果val为true或false，它会将其中一个传递给拖动？根据本例中屏幕大小大于560然后为真的条件，否则可以将函数核心替换为：return（拖动>560）；不，不，我不需要隐藏元素，我需要根据屏幕大小禁用滚动功能。在这种情况下，只需使用CSS。媒体查询和溢出：隐藏的应该可以工作不，我不需要隐藏元素，我需要根据屏幕大小禁用滚动功能。在这种情况下，只需使用CSS。媒体查询和

溢出：隐藏的
应该有效你说的“动态”是什么意思？简化很好，但在这种情况下，当我在桌面上调整屏幕大小时，我仍然在寻找它，以禁用在小屏幕上滚动。当我拖动窗口屏幕并调整大小时，我调整了答案，请尝试并使用代码，您可以在控制台中看到它确实起作用：）是的，它确实起作用，所以我只需要计算将这些值更改为true和false，然后将它们应用于google地图谢谢。您所说的“动态”是什么意思？简化很好，但在这种情况下，当我在桌面上调整屏幕大小时，我仍然在寻找它，以禁用小屏幕上的滚动。当我拖动窗口屏幕并调整其大小时，我调整了答案，请尝试并使用代码，您可以在控制台中看到它确实有效：）是的，它确实有效，所以我只需要将这些值更改为true和false，然后将它们应用到google map Thank.hm getting:main.js:607 Uncaught TypeError:map.setOptions不是MediaQueryList的函数。MQChange您是否将google Maps初始化为根据他们的？在调用
map.setOptions
之前，你能记录
map
吗？是的，它现在工作了，启动时出现了一些问题，所以我会修复它。但是是的，这很好地解决了我在
函数initMap（）
中声明的
var-map=…
问题，基本上是编写
var-map=new google.maps.map（document.getElementById（'map'））
hm get:main.js:607 Uncaught TypeError:map.setOptions不是MediaQueryList.mqchange中的函数您是否根据其初始化Google地图？能否在调用
map.setOptions
之前登录
map.setOptions
吗？是的，它正在工作，启动时出现问题，因此我将修复它。但是是的，这很有效，谢谢e问题我在
函数initMap（）
中声明
var-map=…
，基本上是编写
var-map=new google.maps.map（document.getElem