Javascript无法在带有媒体查询的移动设备上运行

Question

Java可以在桌面上按预期执行，但是一旦移除显示，网格就无法在手机或平板电脑上执行。在媒体查询的“包装”类中显示，以便在较小的设备上将元素显示为块状。

任何人都可以帮助我了解为什么会发生这种情况以及此问题的任何可能解决方案吗？谢谢

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 100vh;    
}

.wrapperleft {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-template-rows: auto;
  width: 50vw;
  max-height: 100%;
  overflow-y: hidden;
}

.wrapperright {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-template-rows: 200px;
  width: 50vw;
  height: auto;
  overflow-y: auto;
}

JS

$(window).on('load', function() {

var pouch = $('.wrapperright'),
items = pouch.find('div'),
gate, spot = {},
zone = pouch.scrollTop(),
haze = 'opacity';

$(this).resize(collectInfo).resize();

pouch.scroll(function() {

items.each(function() {

var aim = $('#' + $(this).data('target')),
edges = this.getBoundingClientRect(),
apex = Math.round(edges.top),
nadir = Math.round(edges.bottom);

if (apex < gate && nadir > 0) aim.removeClass(haze);
else aim.addClass(haze);
});

var rise = $('.bio li').not('.' + haze),
turf = pouch.scrollTop();

if (rise.length > 1) {
if (turf > zone) rise.eq(0).addClass(haze);
else rise.eq(1).addClass(haze);
}

zone = turf;
});

$('.bio li').click(function() {

if (pouch.scrollTop() == spot[this.id]) return;

pouch.stop().animate({scrollTop: spot[this.id]}, 1500);
});

function collectInfo() {

gate = $(this).height();

items.each(function() {

spot[$(this).data('target')] = 
Math.round($(this).position().top+pouch.scrollTop());
});
}
});

$('.up').click(function(){
$('.wrapperright').animate({scrollTop:0}, 'slow');

});