How to Scale a Link, which opens in an Iframe, to 50% of its original Width and Height

So if you visit www.mymanchesteruniverse.co.uk you will see an iphone at the bottom of the page.

The music icon should link to music.mymanchesteruniverse.co.uk.

What i need to do is resize only this link so the page shows normal size, yet scal开发者_高级运维ed down to about 50% of its normal width and height while fitting in the iPhone iframe perfect. (trying to make it look like an iPhone formated page, which it is, just not fitting right here)

The code for the button/link is in this div

<div id="apDiv4" onclick="window.open('http://music.mymanchesteruniverse.co.uk', '_self', 'scale=50')"></div>

If anyone can help me modify the code (and replace my 'scale=50', as that didn't work) The whole team at MyManchesterUniverse would be very grateful.

Cheers, Nick

www.NickGarofalo.com

You might be able to use the CSS Zoom property - supported in IE 5.5+, Opera, and Safari 4, and Chrome (verifed, please check before downvoting). Firefox is the only major browser that does not support Zoom (bugzilla item here) but you could use the "proprietary" -moz-transform property in Firefox 3.5.

#iframeid {
    zoom: 0.75;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;
}

I used these answers in this post. And then verified it works in firefox 3.6 in your demo page.

How can I scale an entire web page with CSS? How can I scale the content of an iframe?