如何使移动 UI 按特定宽度自动打开

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/