Jquery 仅在移动设备上操作 DOM答案

【问题标题】：Jquery manipulate DOM on mobile onlyJquery 仅在移动设备上操作 DOM
【发布时间】：2017-02-21 12:20:57
【问题描述】：

我有一个引导列系统，但是它们的堆叠方式在移动设备上我想将其中一个元素移动到另一个元素之前。我相信这可以通过 .append() 来完成。

是否可以使用 append() 移动我想要的元素，但只能在移动设备上？

谢谢

【问题讨论】：

分享一些代码，sn-p 或小提琴
也许这会有所帮助fourfront.us/blog/jquery-window-width-and-media-queries
那个链接太好了，非常感谢:)

标签： javascript jquery css responsive-design

【解决方案1】：

您可以先检查设备的浏览器是否支持触摸事件（例如桌面不支持，移动支持）

如果是，你可以执行追加，如果不是，什么都不会发生。

var isMobile = (function() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
})();

if(isMobile) {
    your append action
}

【讨论】：

但是你怎么知道它是平板电脑还是手机，因为它们都支持触摸事件？
确实如此。我会说您可以尝试检查设备的纵横比，因为手机通常具有 16:9 或 16:10 的纵横比。平板电脑通常具有不同的纵横比，例如 4:3。对于 iPad，您还可以使用 navigator.platform 属性进行检查。以下是完整列表：stackoverflow.com/questions/19877924/…

【解决方案2】：

http://detectmobilebrowsers.com/

在这里，您可以获取所有移动/平板设备的基于正则表达式的函数的 javascript/jquery 文件。如果您选择其中一些并为手机/平板电脑构建两个单独的函数，您可以为平板电脑和仅手机执行正则表达式。

希望对你有帮助:)

【讨论】：