如何使移動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自動按特定寬度打開？

回答

相關問題