Scaling iframe on Android browser

Question

Hello (sorry for my English)

I have a responsive website with so iframes, i have to scale them with my script:

 function resize_budynek() {
                            var width = $j(window).width();
                            //alert(width);
                            if(width>960) width = 960;
                           var skala = width/960;

                            $j("#loginframe").css("transform","scale("+skala+")");
                            $j("#loginframe").css("-webkit-transform","scale("+skala+")");
                            $j("#loginframe").css("-moz-transform","scale("+skala+")");
                            $j("#loginframe").css("-o-transform","scale("+skala+")");
                        }
                        $j(window).resize(resize_budynek);
                        $j(document).ready(resize_budynek);

On desktop browsers everything works good but on Android browser i can see a iframe (in good scale - i can see border) but content is only part in left top corner, the rest of page inside frame is hidden.

#loginframe {
width:650px; 
height:350px;
-moz-transform-origin:0 0;
-webkit-transform-origin:0 0;
-o-transform-origin: 0 0;
transform-origin:0 0;

position:relative;
top:0;
left:16.15%;
}

Answer 1

Target the iframe contents rather than the iframe. If you scale the iframe you get whitespace as you are reducing the size after the DOM registers it on the page.

If you scale the contents this will work correctly leaving the iframe the right size.

(Obviously this will only work for same domain iframes, othersise it will be subject to cross domain issues.)

$('iframe').contents().find(body).css({'zoom':'scale("+skala+")', 'webkit-transform':'scale("+skala+")'});