全球框架（引導，基金會...）智能手機的JS檢測

Question

我遇到過這樣的幾次。有時候需要弄清楚你選擇的基金會或Bootstrap這樣的框架是否已經將實際設備識別爲智能手機。雖然你總是可以去window.width（），但檢查你的框架是否真的顯示智能手機內容（尤其是如果你在SASS中改變你的斷點而不想手動改變JS）更安全也更可靠。

爲此，我已經想出了實現這一目標的最佳方法，即檢查在頁眉/頁腳中使用的給定框架類的CSS，並在全局模板中使用。

這是jQuery的JS來檢查，如果基金會（foundation.zurb.com）每個窗口大小時檢測到智能手機：

var smartPhone; 
jQuery(window).bind('resizeEnd', function() { 
    if ($(".show-for-small-only").css("display") == "block") { 
     smartPhone = 1; 
    } 
    else { 
     smartPhone = 0; 
    } 
}); 

希望它能幫助。此代碼可以編輯爲適用於爲智能手機上的類添加一些CSS的每個框架。所以我想不出一個不適合的人。玩的開心！

此外，您可以使用它來檢測平板電腦，上網本等。如果你這樣做的話，那麼請友善地發佈你的代碼，因爲爲每個框架挑選代碼可能有點複雜。謝謝。

Answer 1

引導代碼：

var smartPhone; 
jQuery(window).bind('resizeEnd', function() { 
    if ($(".visible-xs").css("display") == "block") { 
     smartPhone = 1; 
    } 
    else { 
     smartPhone = 0; 
    } 
});