모바일에서 하위 iframe에서 부모페이지의 width 값을 가져올 때, 실제 width값을 가져오지 못하는 오류가 있다. Chrome에서 개발자 모드로 iframeScreenWidthparentScreenWidth를 체크하면 값이 같게 나온다. 하지만, 실제 아이폰에서 alert를 띄어 두 값을 체크하면 다르게 나온다. 그래서 실제 부모 페이지의 width값을 가져오려면 window.innerWidth를 보다는 $(top.document).width()로 작성해야 한다. 기본적으로 모바일에서는 iframe 사용을 자제해야 한다.

var $container = $("#iframe").contents().find("#container");
var $table = $container.find("table") || null;
var iframeScreenWidth = window.innerWidth || 0;
var parentScreenWidth = $(top.document).width() || 0;
var scaleRatio = 1;

if ($table.length) {
    // scaleRatio = iframeScreenWidth / parseInt($table.width(), 10);
    scaleRatio = parentScreenWidth / parseInt($table.width(), 10);
    $table.css({
        'transform': 'scale(' + scaleRatio + ') translate3d(0, 0, 0)',
        'transform-origin': '0 0',
        '-webkit-transform': 'scale(' + scaleRatio + ') translate3d(0, 0, 0)',
        '-webkit-transform-origin': '0 0',
    });
}