【小白求助】如何在移动设备上自动选择列表模式

Question

大家好，我是本站新人，也是刚刚学编程，现在遇到一个前端问题，于是发个帖子求助，希望有大神可以指点。

我在网上发现一个单页面模板，想把它放在我们网站上面。这个模板有两个视图：列表视图和网格视图，默认为网格视图。在电脑端查看没有任何问题，但是在移动端查看的时候就挤在一起显得很难看。

模板链接：https://bootsnipp.com/snippet...

我想在移动设备上查看的时候只显示列表视图，于是我在JS那里添加判断代码如下：

if (screen.width <= 819) {
  
  $(document).ready(function() {
    $('#list').ready(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');});
    
  }); 
}

但是没有解决问题 :(

希望高手指点，感激不尽！

Answer 1

其实你的想法也没错，不过就是错了一步而已：event.preventDefault()是阻止默认事件，原先是阻止点击时触发a标签的默认事件，但是你这里是没有a的，所以要删掉，不然报错

if (screen.width <= 819) {
  $(document).ready(function() {
    $('#products .item').addClass('list-group-item');
  }); 
}

Answer 2

可能真的是问题太小白了 哈哈
我现在只知道 @media query 似乎可以解决