I need to scale the content of an iframe so it fits and shows right on iphone. Im using transform:scale property and it shows fine in any browser, but safari for iphone, which is exactly the device i made the page for. The content is not reduced in size, but rather the container, which causes the content to be only half visible.

This is my html code:

HTML Code:
     <iframe src="http://www.blog.com/index.php" class="blog"></iframe>
and my css:

.blog {
    border: 0 none;
    height: 4350px;
    left: 0;
    overflow-x: hidden;
    position: absolute;
    top: -150px;
    -web-kit-transform: scale(0.7, 0.8);
    -web-kit-transform-origin: left top 0;
    width: 148%;

Is there a work around for this?

Thank you.