全球框架(Bootstrap, Foundation…)智能手机JS检测

Global Framework (Bootstrap, Foundation ...) JS Detection for Smartphones

本文关键字：智能手机 JS 检测 Foundation 框架 Bootstrap      更新时间：2023-09-26

我遇到过几次这种情况。有时需要弄清楚您选择的框架(如Foundation或Bootstrap)是否检测到实际设备是否为智能手机。虽然你可以一直使用window.width()，但检查框架是否真正显示智能手机内容更安全、更可靠(特别是如果你在SASS中更改了断点，并且不想手动更改JS)。

要做到这一点，我已经找到了最好的方法来做到这一点是检查一个给定的框架类的css是在页眉/页脚中使用的，所以正在使用在每个模板全局

这是jQuery js检查foundation (foundation.zurb.com)是否检测到智能手机每次窗口的大小调整:

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

希望有帮助。可以对这些代码进行编辑，使其适用于向智能手机上的类添加CSS的每个框架。所以我想不出一个不行的。玩得开心!

此外，你可以用它来检测平板电脑，上网本等。如果你这样做了，请把你的代码贴出来，因为为每个框架整理代码可能有点复杂。谢谢你。

引导代码:

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