使用JS的等高高度欄 - 未在移動設備上工作

我正在使用JS來計算包含各種大小的文本和圖像的三列的高度。使用JS的等高高度欄 - 未在移動設備上工作

這裏是我用JS：

maxHeight = 0; 
$('.equalheight').each(function() { 
    maxHeight = Math.max(maxHeight, $(this).outerHeight()); 
}); 

$('.equalheight').css({ height: maxHeight + 'px' });

這工作在多個瀏覽器在桌面上，但是，它不會對某些移動設備。它適用於我的iPad Mini（最新iOS），但不適用於其他iPad 3或iPhone。它也不適用於使用股票瀏覽器的Samsung Galaxy S4。

我該如何解決這個問題？

Here is the site有問題。

來源

2013-07-26 L84

你能提供一個測試用例（jsbin，jsfiddle）嗎？ –

在你的'each（）'調用中，嘗試手動將'maxHeight'設置爲400.如果這不起作用，那麼你更接近於找到你的bug。 – Jared

@JoDavid - 我添加了網站鏈接，我沒有創建一個小提琴。 – L84

下面是@黃教的建議inline-block的小提琴。您可以調整柱高以進行實驗。 http://jsfiddle.net/6WZrM/4/

如果容器div具有固定高度，則列將填充到該高度。我使用js而不是列高度直接設置。也許這種方法適用於你的問題設備。另外值得考慮的是，您在maxHeight之前沒有var，我想有些設備可能會將其範圍與其他設備區別開來。

//css 
#column1, #column2{ 
    width: 50%; 
    display: inline-block; 
    height: 100%; 
} 

//js 
var maxHeight = 0; 
$('.equalheight').each(function() { 
    maxHeight = Math.max(maxHeight, $(this).outerHeight()); 
}); 

$('#container').css({ height: maxHeight + 'px' });

來源

2013-07-26 17:55:02 Plato

有一個jQuery插件這個確切的目的：https://github.com/dubbs/equal-height

如果你想使所有列在同一高度，用途：

$('.equalheight').equalHeight();

如果您想給他們組的頂部位置，例如。在每個容器內：

$('.equalheight').equalHeight({ groupByTop: true });

來源

2016-05-23 23:30:12 strictlyk3v

使用JS的等高高度欄 - 未在移動設備上工作

回答

相關問題