With browsers that have full-page zoom, can I use

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

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

Answer 2

This HTML5 and CSS3 codes working for me are: zoom for IE 6 to 8, and transform scale for the rest of the modern browsers.

#iframe{
    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; }

Firefox 3.5 and up, Safari 3.1, Chrome 4.0, Opera 10.5 are supported.

Looking for a JS or JQuery solution like this which works cross browser for old versions with custom built functions based on xy axis and offset.

I believe the path is to use xy axis functions but can´t find any pre-made zoom-out code to take it as a seed.

Answer 3

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 4

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.