javascript - 如何使用JQUERY生成媒体查询

当用户使用小于桌面的设备访问页面时，我试图显示一个对话框。我不是jQuery专家。我在下面尝试了以下方法，但未成功。

$(document).ready(function () {
  if (window.matchMedia('(max-width: 767px)').matches) {
    var dialog = $("#ScreenSize").dialog({
      modal: true,
      autoopen: true,
    }).show();
  } else {
    $("ScreenSize").dialog().hide();
  }
});

<div id="ScreenSize" style="display:none">
  <p>Go to Text Box</p>
</div>

最佳答案

此代码在Dom准备就绪时执行。考虑到仅在if分支中打开该对话框，实际上else分支是无用的，因为当您重新加载页面时，根本不会打开它。也许您没有提供其他逻辑。

然后.dialog（）是jQuery UI库的一种方法。您还应该添加该库，以使对话框正常工作。如果打开控制台，则会看到方法dialog（）未定义。

关于javascript - 如何使用JQUERY生成媒体查询，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44155806/