javascript - 如何使移动用户界面按特定宽度自动打开？

Question

如果这个问题措辞不当，我们深表歉意。我不知道还有什么方法可以压缩它。

我有一个音乐播放器，它有一个按钮，您可以单击该按钮来切换播放器的较小 UI，适用于移动设备。我如何设置它以便较小的播放器自动打开特定的最小和最大高度集？

• 切换类是“.more”
• 较小的版本是'.m-ui'
• 它所在的 div ID 是“#box”

如果有进一步帮助的话。

谢谢!

Answer 1

您可以使用 resize 事件:

我举个例子:

$(window).on('resize', function(e) {
  if ($(document).width() < 500) {
    $("#player").width(50);
    $("#player").height(50);
  } else {
    $("#player").width(100);
    $("#player").height(100);
  }
});

https://jsfiddle.net/50mc23nx/

编辑:根据您的评论，我认为您需要在网站打开时切换类别(如果您搜索一种检测它是否是移动设备的好方法，我建议您搜索 SO)

$(function() {
  if ($(document).width() < 500) {
    $("#box").toggleClass("m-ui", true);

  } else {
    $("#box").toggleClass("m-ui", false);
  }
});

https://jsfiddle.net/z67dtnxm/