CSS3 列未显示在 IPad 和 IPhone 上

Question

我正在使用 CSS3 列，如

.Content {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
.List {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 0px;
    -moz-column-gap: 0px;
    column-gap: 0px;
    display: block !important;
}

我的 html 看起来像这样。

<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 List">
  <div class="Content col-lg-12 col-md-12 col-sm-12 col-xs-12">
     My content
  </div>
</div>

我用 Chrome 开发工具检查了我的 iPad 和 iPhone 显示器，它工作正常。然而，真正的 iPad 和 iPhone 没有显示任何东西。我该如何解决这个问题？

Answer 1

不完全支持使用前缀 -webkit- 的浏览器缺少一些无法使用的元素。

Webkit browsers do have equivalent support for the non-standard -webkit-column-break-* properties to accomplish the same result (but only the auto and always values). Firefox does not support break-*.

CanIUse - Columns

这几乎表明 webkit 浏览器（例如 iPhone 或 iPad 上的浏览器）甚至不支持 column-break，因此您需要找到一个替代方案，例如使用 JavaScript 或在 CSS.

中回退

Columnizer 是一个很好的 jQuery 插件，它产生相同的效果但使用 JavaScript.

Columnizer jQuery Plugin

Answer 2

经过长途跋涉，我找到了解决这个问题的方法。我想要实现的是让我的卡片看起来像 pinterest。我用了 Lightweight Responsive Pinterest Layout with jQuery - Waterfall.

CSS3 列未显示在 IPad 和 IPhone 上

CSS3 Columns are not displaying on IPad and IPhone

css

iphone

ipad

css-multicolumn-layout