Zoom/scale page on load for users to be as wide see my images of wordpress website

Question

So I designed a website that is for 1024x768... A decision I made based on global stats showcasing this to be still the predominant resolution.

I myself zoom in and it looks great. I used a few tricks on some pictures they are higher res but scaled down if you zoom in they are not blury.

However... now anyone who opens and doesn't know how to zoom in will see a page that's tiny as more and more people are using higher resolution screens. Still having the users to zoom in is not right and I want to fix this...

Is there a way to scale the page upon opening for each user depending on their viewport?

How a user sees it now: http://i.stack.imgur.com/XBqiQ.jpg

How I view it and would like users to view: http://i.stack.imgur.com/xNTIF.png

The only stuff I could find relating to zooming and scaling was for images only...

---

ADDITIONAL EDIT:

Ok in response to the answer given to me to what was given to me did not work in firefox not sure about IE as I did not test it but it was exactly what i wanted!

$('body').css('zoom',$(window).width()/1200);

Any suggestions?

The problem I also run in to using this is with an iframe I have: I use this on an iframe page to load the forum and fit it in the content of the wordpress page . This code automaticaly resizes it and puts it on top.

<script language="javascript" type="text/javascript">
 function resizeIframe(obj)
 {
   obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
   obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';                        
 }
 </script>

[iframe id="frmid" frameborder="0" padding="0" margin="0" onload="javascript:resizeIframe(this); window.parent.parent.scrollTo(0,0)" src="http://muslimbodybuilding.com/Forum/" scrolling="no"]

See screenshot in comment I could not post another link limits me...

======================

I've also run across another similar solution that works in Firefox

<script type="text/javascript">
jQuery(window).load(function() {
  var currentWidth = jQuery(document.body).width();
    var targetWidth = 1100; // experiment for your self
    var scrollWidth = 0; // need to make it dynamic --- was 20
    // if the screen is not bigger than the target, then don't mess with zooming
    if (currentWidth > targetWidth) {
      if (typeof document.body.style.transform != "undefined")
        document.body.style.transform = currentWidth / targetWidth;
      else if (typeof document.body.style.MozTransform != "undefined") {
        document.body.style.MozTransformOrigin = "left top";
        document.body.style.MozTransform = 'scale(' + currentWidth / targetWidth + ')';
      }
      else if (typeof document.body.style.WebkitTransform != "undefined")
        document.body.style.WebkitTransform = 'scale(' + currentWidth / targetWidth + ')';

      jQuery(document.body).width(targetWidth - scrollWidth);
   }
});
</script>

It zooms in the iframe too, however the facebook slider I have then gets pushed and moves around as I keep changing pages.

In chrome it still does not zoom the iframe with this method.

Any ideas on this?

Answer 1

Assuming you are using jQuery (you can do it without jQuery but it makes the code much more succinct for cross-browser compatibility) you could do:

$('body').css('zoom',$(window).width()/768);

This sets the zoom property of the body to the ratio by which the browser window is wider than your design. Beware that not all browsers support css zoom .

However, this is really a bit of a nasty hack - the 'modern' way to do it is to use responsive web design , to give a good experience whatever the width of the client browser.