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

很抱歉，如果这个问题措辞不佳。我不知道如何压缩它。如何使移动UI自动按特定宽度打开？

我有一个音乐播放器，有一个按钮，您可以点击切换播放器的较小UI，适合移动设备。我怎样才能设置它，以便较小的播放器自动打开特定的最小和最大高度设置？

的切换类是 '更多'
较小的版本是 '.M-UI'
，它是在div ID为 '#box'

如果这进一步帮助任何。

谢谢！

来源

2017-04-12 Johnson14

您可以用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/

来源

2017-04-12 09:35:49

这不是我所期待的。 http://imgur.com/a/xyhDH 看看那个图片。左侧是完整的音乐播放器。右边是小球员。您可以点击右上角的按钮在两个界面之间切换。我想要的是小人物（而不是大人物）在人使用手机时自动打开。 – Johnson14

如果用户在移动设备上（通过检查clientWidth），然后根据结果切换类，我将更新我的答案。 –

嘿，看起来像没有工作出于某种原因，但使用（$（窗口），而不是（$（文档）工作！这应该是我想要完成的吗？我读了一点之间的区别但我对jQuery知之甚少，因此试图理解它并不容易，请让我知道。谢谢你的帮助!! – Johnson14

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

回答

相关问题