With browsers that have full-page zoom, can I use the feature to set zoom for iframes?

Question

I think every browser has user-controllered full-page zoom nowadays. Is it in anyway accessible to developers, via either html, css or javascript?

I'd like to provide an iframe, or even a normal frame, and set it to, say, 50% zoom. (Relative to the current zoom of the containing document, ideally.)

Is it at all doable? I don't mind if it's an HTML 5 solution as long as it has an existing functional implementation. Even if it's in a nightly build.

I'd be very happy if it worked with at least WebKit and Gecko, and bonus if Trident too.

Answer 1

The closest thing I can think of is Zoom in CSS3:

div.zoom { zoom: 200%; }

<div class="zoom">
  <p>Hello World</p>
</div>

This will not work merely by adding it to an ifarme tag:

<iframe id="myFrame" class="zoom" /> <!-- doesn't work -->

You'll have to apply it to a content-tag within the iframe DOM itself, either the BODY or a wrapper-div.

Other than that, I don't know of a way to do this that would find great support cross-browser.

Answer 2

The following works in Safari 4.0.2 and latest WebKit nightly. It doesn't work in Google Chrome (neither Windows nor Mac), however.

As for Firefox 3.5 and IE 8.0, no deal. Also, no deal on latest Camino nightly.

<style type="text/css" media="screen">
  iframe {
    width  : 500px;
    height : 250px;
  }
</style>

<script type="text/javascript" charset="utf-8">
  function setZoom(element, zoom) {
    element.style.zoom = (zoom || 50) + '%'
  }
</script>

<p>Hello World</p>

<iframe 
  src    = 'http://google.com' 
  onload = "setZoom(this.contentDocument.body)"
  />

Answer 3

That can also be done in FF, like this:

iframe {
 -moz-transform: scale(0.5, 0.5); /* 50% */
}

It works great!

Check: https://developer.mozilla.org/en/CSS/-moz-transform