how to scale content to fit iframe

[Manmade]

I have a webapp (iphone) with an iframe and I want to resize the content in the iframe so nothing is cropped. I have managed to get this to work with the below code, the problem I get is that none of the links in the page that I load in the iframe works.

And the problem is this:

-webkit-transform: scale(0.30);
-webkit-transform-origin: 0 0;

When I use the transform scaling then for some reason the links stop to work. If I remove the above css the links starts to work, but then the content is overflowing and cropped in the iframe.

I use this to scale the content:

<div class="theiframewrap">      
<iframe id="theiframeid" class="theiframeid" src="http://www.mypage.se/"></iframe>
</div>

.theiframewrap { 
    width: 320px!important;     
    padding: 0px; 
    top:45px; 
    position:relative; 
    overflow:hidden; 
    border:0px solid #f00;
    z-index:2200;
    }
.theiframeid { 
    height:600px;
    width:100%;
    margin:0px; 
    top:0px; 
        -webkit-transform: scale(0.30);
        -webkit-transform-origin: 0 0;
    z-index:2300;
}

As I wrote, this works, it scales down the content as it should, but why does the links stop working?

Do you have any other way to do it, PLEASE let me know, this drives me nuts :-) Thanks.