Question

我曾经遇到过这种情况。有时候需要弄清楚你所选择的框架如Foundation或Bootstrap是否已经检测到实际设备是否为智能手机。虽然你总是可以使用window.width（），但是检查你的框架是否真的显示智能手机内容是更安全和更可靠的（特别是如果你在SASS中更改断点并且不想手动更改JS）。 / p>

为此，我发现最好的方法是检查页眉/页脚中使用的给定框架类的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

Bootstrap代码：

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

全球框架（Bootstrap，Foundation ...）智能手机的JS检测

1 个答案: