JS를 사용하여 동일한 높이 열 - 모바일 장치에서 작동하지 않습니다.

Question

JS를 사용하여 다양한 크기의 텍스트와 이미지가 포함 된 세 열의 높이를 계산합니다.

이 여러 브라우저에서 바탕 화면에 작동 ​​

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

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

, 그러나, 특정 모바일 기기에서 작동하지 않습니다 여기에

은 내가 사용하고있는 JS이다. 내 iPad Mini (최신 iOS)에서 작동하지만 다른 iPad 3 또는 iPhone에서는 작동하지 않습니다. 또한 삼성 Galaxy S4에서도 스톡 브라우저를 사용하지 않습니다.

이 문제를 어떻게 해결할 수 있습니까?

Here is the site.

Answer 1

@ Huangism의 제안이 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' }); 

Answer 2

이 정확한 목적을 위해 jQuery 플러그인이 : https://github.com/dubbs/equal-height

모든 열을 같은 높이 사용을 확인하려면 : 당신이 그룹화를 원하는 경우

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

자신의 상단 위치, 예. 각 컨테이너 내에 :

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