Jquery Mobile - 网格断点

Question

我正在使用以下 jqm 网格，我希望每个网格在方向更改为纵向模式时堆叠在一起，我认为目前的断点是 45em。

我使用了下面的语法，但是没有用，有什么建议吗？

//为 1200 像素宽度添加最小/最大类
$.mobile.addResolutionBreakpoints(1200);

//为 1200 和 1440 像素宽度添加最小/最大类
$.mobile.addResolutionBreakpoints([1200, 1440]);

网格：

网格 B (33/33/33)

A座 B座 C座

Answer 1

你可以通过监听orientationchange事件来实现。

首先，创建一个将添加到块中的自定义类。

.blocks {
  width: 100% !important;
}

在pageshow 或pagebeforeshow 上，如果屏幕高度大于宽度（纵向），则添加该类。

$(document).on('pagebeforeshow', function () {
  if ($(this).height() > $(this).width()) {
    $('.ui-block-a, .ui-block-b, .ui-block-c').addClass('blocks');
  }
});

在orientationchange 添加/删除该类。

$(window).on('orientationchange', function (e) {
  if (e.orientation == 'landscape') {
    $('.ui-block-a, .ui-block-b, .ui-block-c').removeClass('blocks');
  }
  if (e.orientation == 'portrait') {
    $('.ui-block-a, .ui-block-b, .ui-block-c').addClass('blocks');
  }
});

Demo