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 diplay，它工作正常。不過，真正的iPad和iPhone沒有任何表現。我該如何解決這個問題？

Answer 1

採取長途旅行後，我發現了一個關於這個問題的解決方案。 我想要實現的是使我的卡看起來像pinterest。我用Lightweight Responsive Pinterest Layout with jQuery - Waterfall。

Answer 2

不完全支持使用前綴-webkit-的瀏覽器有一些缺失的元素無法使用。

WebKit瀏覽器做有非標準屬性-webkit-column-break-*相當於支持以實現相同的結果（但是隻有auto和always值）。 Firefox不支持break-*。

CanIUse - Columns

這幾乎指出WebKit的瀏覽器（如那些在iPhone或iPad）不具有甚至部分支持column-break，因此，你需要找到一個替代，例如使用JavaScript或在CSS中有一個回退。

Columnizer是一個很好的jQuery插件，可以創建相同的效果，但使用JavaScript。

Columnizer jQuery Plugin