使用 JavaScript 在移动设备上排除功能 [重复]

Posted 2023-03-14

【中文标题】使用 JavaScript 在移动设备上排除功能 [重复]

【英文标题】：Use JavaScript to Exclude Feature on Mobile [duplicate]

【发布时间】：2018-12-18 18:59:49

【问题描述】：

我正在寻找一种方法使“箭头：真”取决于用户是否在移动设备上。这是一个涉及液体模板语言的幻灯片

 this.settings = 
      accessibility: true,
      arrows: true,
      dots: false,
      fade: true,
      draggable: true,
      touchThreshold: 20,
      autoplay: this.$slideshow.data('autoplay'),
      autoplaySpeed: this.$slideshow.data('speed')
    ;

我尝试设置和使用变量无济于事。有没有直接的方法来做到这一点？

编辑：

我尝试了以下方法（很可能有错误）：

var noarrow 

if ($(window).width() <= 670) 
 noarrow = "false",
  else  
noarrow = "true"

arrow: "no arrow"

【问题讨论】：

你用的是什么库？ arrows 是被动的吗？您可以在幻灯片创建后设置arrows 吗？您可以利用 javascript 版本的媒体查询：matchMedia

“我尝试设置和使用变量无济于事。” - 你能分享你的尝试吗？它不仅可以让我们更具体地了解您想要做什么，还可以帮助我们避免建议您已经尝试过的解决方案。

不要从“我希望在移动设备而不是桌面设备上启用它”的角度来处理这个问题。启用基于具体功能集的功能，例如可用的屏幕宽度或触摸功能。否则，您可能会导致某个功能在应该启用的平台上不可用。

使用modernizr我是吗？

我已经更新了帖子以显示我的尝试

【参考方案1】：

这是我使用过的解决方案，但您必须使用 function 获取值，而不是使用对象的 property。

---

let settings = 
  accessibility: true,
  arrows: () => 
    return /android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? true : false;
  ,
  dots: false,
  fade: true,
  draggable: true,
  touchThreshold: 20
;

console.log(settings.arrows());

【讨论】：

测试代码：打开检查器F12 & 按Ctrl + Shift + M & 运行代码 sn-p。它应该返回True。