如何实现仅在特定CSS宽度下生效的JS/jQuery功能，仅移动端触发按钮弹窗？

完全可以实现该需求，以下是两种不同场景的可落地方案，默认以常见的767px作为移动端断点，你可以根据自己项目的CSS媒体查询规则调整数值。

方案1：直接判断视口宽度（最简便） #

原生JS实现 #

<!-- 页面中的按钮结构 -->
<button id="triggerBtn">测试按钮</button>

document.getElementById('triggerBtn').addEventListener('click', function() {
  // 每次点击都实时校验当前视口宽度，支持拖拽窗口改变尺寸后的动态适配
  if (window.innerWidth <= 767) {
    alert("hello world");
  }
});

jQuery实现 #

$('#triggerBtn').on('click', function() {
  if ($(window).width() <= 767) {
    alert("hello world");
  }
});

方案2：与CSS断点完全同步（推荐） #

如果你的项目CSS已经定义了移动端断点，为了避免JS和CSS两端维护断点导致不一致，可以通过CSS传递状态给JS读取：

/* 和你现有项目的移动端媒体查询保持一致即可 */
@media (max-width: 767px) {
  body::before {
    content: "mobile";
    display: none; /* 隐藏伪元素，不影响页面布局 */
  }
}

JS侧读取伪元素内容判断当前设备类型：

document.getElementById('triggerBtn').addEventListener('click', function() {
  const deviceType = window.getComputedStyle(document.body, '::before').content.replace(/"/g, '');
  if (deviceType === 'mobile') {
    alert("hello world");
  }
});

补充说明 #

如果你不需要支持用户拖拽窗口改变尺寸后的动态适配，也可以在页面初始化时判断宽度，仅在移动端绑定点击事件，减少每次点击的校验开销：

// 仅页面加载时判断一次，窗口resize后状态不会更新
if (window.innerWidth <= 767) {
  document.getElementById('triggerBtn').addEventListener('click', function() {
    alert("hello world");
  });
}

内容的提问来源于stack exchange，提问作者Saad Hesham